<p><strong>UX research</strong> can take so much of the guesswork out of the design process! But it’s easy to forget just how <em>different</em> people are and how their needs and preferences can vary. We can’t predict the needs of every user, but we shouldn’t expect different people using the product in roughly the same way. That’s how we end up with an incomplete, inaccurate, or simply wrong picture of our customers.</p>
<p>There is no shortage of accessibility checklists and guidelines. But accessibility isn’t a checklist. It doesn’t happen by accident. It’s a <strong>dedicated effort</strong> to include and consider and understand different needs of different users to make sure everyone can use our products successfully. That’s why we’ve teamed up with Michele A. Williams on a shiny new book around just that.</p>
<p>Meet <em>Accessible UX Research</em>, your guide to <strong>making UX research more inclusive</strong> of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. <a href="https://www.smashingmagazine.com/printed-books/accessible-ux-research/">Pre-order the book.</a></p>
<a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-opt.png">
<img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-coming-soon-light-varnish-opt.png"></a>
About The Book
<p>The book isn’t a checklist for you to complete as a part of your accessibility work. It’s a <strong>practical guide to inclusive UX research</strong>, from start to finish. If you’ve ever felt unsure how to include disabled participants, or worried about “getting it wrong,” this book is for you. You’ll get clear, practical strategies to make your research more inclusive, effective, and reliable.</p>
<p>Inside, you’ll learn how to:</p>
<ul>
<li>
<strong>Plan research</strong> that includes disabled participants from the start,</li>
<li>
<strong>Recruit participants</strong> with disabilities,</li>
<li>
<strong>Facilitate sessions</strong> that work for a range of access needs,</li>
<li>
<strong>Ask better questions</strong> and avoid unintentionally biased research methods,</li>
<li>
<strong>Build trust and confidence</strong> in your team around accessibility and inclusion.</li>
</ul>
<p>The book also challenges common assumptions about disability and urges readers to <strong>rethink what inclusion really means</strong> in UX research and beyond. Let’s move beyond compliance and start doing research that reflects the full diversity of your users. Whether you’re in industry or academia, this book gives you the tools — and the mindset — to make it happen.</p>
<p>High-quality hardcover. Written by Dr. Michele A. Williams. Cover art by Espen Brunborg. <strong>Print shipping in August 2025. eBook available for download later this summer.</strong> <a href="https://www.smashingmagazine.com/printed-books/accessible-ux-research/">Pre-order the book.</a></p>
Contents
<ol>
<li>
<strong>Disability mindset</strong>: For inclusive research to succeed, we must first confront our mindset about disability, typically influenced by ableism.</li>
<li>
<strong>Diversity of disability</strong>: Accessibility is not solely about blind screen reader users; disability categories help us unpack and process the diversity of disabled users.</li>
<li>
<strong>Disability in the stages of UX research</strong>: Disabled participants can and should be part of every research phase — formative, prototype, and summative.</li>
<li>
<strong>Recruiting disabled participants</strong>: Recruiting disabled participants is not always easy, but that simply means we need to learn strategies on where to look.</li>
<li>
<strong>Designing your research</strong>: While our goal is to influence accessible products, our research execution must also be accessible.</li>
<li>
<strong>Facilitating an accessible study</strong>: Preparation and communication with your participants can ensure your study logistics run smoothly.</li>
<li>
<strong>Analyzing and reporting with accuracy and impact</strong>: How you communicate your findings is just as important as gathering them in the first place — so prepare to be a storyteller, educator, and advocate.</li>
<li>
<strong>Disability in the UX research field</strong>: Inclusion isn’t just for research <em>participants</em>, it’s important for our <em>colleagues</em> as well, as explained by blind UX Researcher Dr. Cynthia Bennett.</li>
</ol>
Who This Book Is For
<p>Whether a UX professional who conducts research in industry or academia, or more broadly part of an engineering, product, or design function, you’ll want to read this book if…</p>
<ol>
<li>You have been tasked to <strong>improve accessibility of your product</strong>, but need to know where to start to facilitate this successfully.</li>
<li>You want to establish a <strong>culture for accessibility</strong> in your company, but not sure how to make it work.</li>
<li>You want to <strong>move from WCAG/EAA compliance</strong> to established accessibility practices and inclusion in research practices and beyond.</li>
<li>You want to <strong>improve your overall accessibility knowledge</strong> and be viewed as an Accessibility Specialist for your organization.</li>
</ol>
<a href="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-opt.png">
<img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/accessible-ux-research-kind-support-light-varnish-opt.png"></a>
About the Author
<p><a href="https://mawconsultingllc.com/"><img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/michele-williams-opt.png"></a>Dr. Michele A. Williams is owner of <a href="https://mawconsultingllc.com/">M.A.W. Consulting, LLC - Making Accessibility Work</a>. Her 20+ years of experience include influencing top tech companies as a Senior User Experience (UX) Researcher and Accessibility Specialist and obtaining a PhD in Human-Centered Computing focused on accessibility. An international speaker, <a href="https://scholar.google.com/citations?user=1IfsBJEAAAAJ&hl=en">published academic author</a>, and <a href="https://patents.justia.com/patent/10854103">patented inventor</a>, she is passionate about educating and advising on technology that does not exclude disabled users.</p>
Testimonials
<blockquote>
<img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/eric-bailey-opt.png">“<em>Accessible UX Research</em> stands as a vital and necessary resource. In addressing disability at the User Experience Research layer, it helps to set an equal and equitable tone for products and features that resonates through the rest of the creation process. The book provides a <strong>solid framework</strong> for all aspects of conducting research efforts, including not only process considerations, but also importantly the mindset required to approach the work.<br><br>This is <strong>the book I wish I had</strong> when I was first getting started with my accessibility journey. It is a gift, and I feel so fortunate that Michele has chosen to share it with us all.”<br><br>Eric Bailey, Accessibility Advocate</blockquote>
<blockquote>
<img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/devon-pershing-opt.png">“User research in accessibility is non-negotiable for actually meeting users’ needs, and this book is a <strong>critical piece in the puzzle</strong> of actually doing and integrating that research into accessibility work day to day.”<br><br>Devon Pershing, Author of <em>The Accessibility Operations Guidebook</em>
</blockquote>
<blockquote>
<img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/manuel-matuzovic-opt.png">“Our decisions as developers and designers are often based on recommendations, assumptions, and biases. Usually, this doesn’t work, because checking off lists or working solely from our own perspective can never truly represent the <strong>depth of human experience</strong>. Michele’s book provides you with the strategies you need to conduct UX research with diverse groups of people, challenge your assumptions, and create truly great products.”<br><br>Manuel Matuzović, Author of the <em>Web Accessibility Cookbook</em>
</blockquote>
<blockquote>
<img src="https://files.smashing.media/articles/accessible-ux-research-pre-release/anna-e-cook-opt.png">“This book is a vital resource on inclusive research. Michele Williams expertly breaks down key concepts, guiding readers through disability models, language, and etiquette. A <strong>strong focus on real-world application</strong> equips readers to conduct impactful, inclusive research sessions. By emphasizing diverse perspectives and proactive inclusion, the book makes a compelling case for accessibility as a core principle rather than an afterthought. It is a must-read for researchers, product-makers, and advocates!”<br><br>Anna E. Cook, Accessibility and Inclusive Design Specialist</blockquote>
Technical Details
<ul>
<li>ISBN: 978-3-910835-03-0 (print)</li>
<li>
<strong>Quality hardcover</strong>, stitched binding, ribbon page marker.</li>
<li>Free worldwide airmail <strong>shipping from Germany starting in August 2025</strong>.</li>
<li>eBook available for download as <strong>PDF, ePUB, and Amazon Kindle later this summer</strong>.</li>
<li><a href="https://www.smashingmagazine.com/printed-books/accessible-ux-research/">Pre-order the book.</a></li>
</ul>
Community Matters ❤️
<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> as soon as it’s out</a>. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin’! ;-)</p>
More Smashing Books & Goodies
<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>
<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="https://www.smashingmagazine.com/printed-books/">printed books that stand the test of time</a>. Addy, Heather, and Steven are three of these people. Have you checked out their books already?</p>
<div>
<div><a href="https://www.smashingmagazine.com/printed-books/success-at-scale/"><img src="https://files.smashing.media/books/success-at-scale-cover-release-opt.png"></a></div>
<h4><a href="https://www.smashingmagazine.com/printed-books/success-at-scale/">Success at Scale</a></h4>
<p>A deep dive into how production sites of different sizes tackle performance, accessibility, capabilities, and developer experience at scale.</p>
<p><a href="https://www.smashingmagazine.com/printed-books/success-at-scale/">Add to cart $44</a></p>
<div><a href="https://www.smashingmagazine.com/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="https://www.smashingmagazine.com/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="https://www.smashingmagazine.com/printed-books/understanding-privacy/">Add to cart $44</a></p>
<div><a href="https://www.smashingmagazine.com/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="https://www.smashingmagazine.com/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="https://www.smashingmagazine.com/printed-books/touch-design-for-mobile-interfaces/">Add to cart $44</a></p>
</div>
<p>If you haven’t encountered ARIA before, great! It’s a chance to learn something new and exciting. If you have heard of ARIA before, this might help you better understand it or maybe even teach you something new!</p>
<p>These are all things I wish someone had told me when I was getting started on my web accessibility journey. This post will: </p>
<ul>
<li>Provide a mindset for <strong>how to approach ARIA</strong> as a concept, </li>
<li>
<strong>Debunk some common misconceptions</strong>, and </li>
<li>
<strong>Provide some guiding thoughts</strong> to help you better understand and work with it. </li>
</ul>
<p>It is my hope that in doing so, this post will help make an oft-overlooked yet vital corner of web design and development easier to approach.</p>
What This Post Is Not
<p>This <strong>is not</strong> a recipe book for how to use ARIA to build accessible websites and web apps. It is also not a guide for how to remediate an inaccessible experience. <strong>A lot of accessibility work is highly contextual</strong>. I do not know the specific needs of your project or organization, so trying to give advice here could easily do more harm than good. </p>
<p>Instead, think of this post as a “know before you go” guide. I’m hoping to give you a good headspace to approach ARIA, as well as highlight things to watch out for when you undertake your journey. So, with that out of the way, let’s dive in!</p>
So, What Is ARIA?
<blockquote>ARIA is what you turn to if there is not a native HTML element or attribute that is better suited for the job of communicating interactivity, purpose, and state.</blockquote>
<p>Think of it like a spice that you sprinkle into your markup to enhance things.</p>
<p>Adding ARIA to your HTML markup is a way of providing additional information to a website or web app for <a href="https://webaim.org/articles/visual/blind#screenreaders">screen readers</a> and <a href="https://webaim.org/articles/motor/assistive#voicerecognition">voice control software</a>.</p>
<ul>
<li>
<strong>Interactivity</strong> means the content can be activated or manipulated. An example of this is navigating to a link’s destination.</li>
<li>
<strong>Purpose</strong> means what something is used for. An example of this is a text input used to collect someone’s name.</li>
<li>
<strong>State</strong> means the current status content has been placed in and controlled by <a href="https://www.w3.org/TR/wai-aria/#introstates">states, properties, and values</a>. An example of this is an accordion panel that can either be expanded or collapsed.</li>
</ul>
<p>Here is an illustration to help communicate what I mean by this:</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/1-interactivity-purpose-state.png"></p>
<ul>
<li>The presence of <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">HTML’s <code>button</code> element</a> will instruct assistive technology to report it as a button, letting someone know that it can be activated to perform a predefined action.</li>
<li>The presence of the text string “Mute” will be reported by assistive technology to clue the person into what the button is used for.</li>
<li>The presence of <a href="https://w3c.github.io/aria/#aria-pressed"><code>aria-pressed="true"</code></a> means that someone or something has previously activated the button, and it is now in a “pushed in” state that sustains its action. </li>
</ul>
<p>This overall pattern will let people who use assistive technology know:</p>
<ol>
<li>If something is interactive,</li>
<li>What kind of interactive behavior it performs, and </li>
<li>Its <a href="https://w3c.github.io/aria/#host_general_attrs">current state</a>.</li>
</ol>
ARIA’s History
<p>ARIA has been around for a long time, with <a href="https://www.w3.org/TR/2006/WD-aria-role-20060926/">the first version published on September 26th, 2006</a>. </p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/2-browser.png"></p>
<p>ARIA was created to provide a bridge between the limitations of HTML and the need for making interactive experiences understandable by assistive technology.</p>
<p>The latest version of ARIA is <a href="https://www.w3.org/TR/wai-aria-1.2/">version 1.2</a>, published on June 6th, 2023. Version 1.3 is slated to be released relatively soon, and you can read more about it in <a href="https://www.craigabbott.co.uk/blog/a-look-at-the-new-wai-aria-1-3-draft/">this excellent article by Craig Abbott</a>.</p>
<p>You may also see it referred to as WAI-ARIA, where WAI stands for “Web Accessibility Initiative.” The <a href="https://www.w3.org/WAI/">WAI</a> is part of the <a href="https://www.w3.org/">W3C</a>, the organization that sets standards for the web. That said, most accessibility practitioners I know call it “ARIA” in written and verbal communication and leave out the “WAI-” part.</p>
The Spirit Of ARIA Reflects The Era In Which It Was Created
<p>The reason for this is simple: The web was a lot less mature in the past than it is now. The most popular operating system in 2006 was <a href="https://en.wikipedia.org/wiki/Windows_XP">Windows XP</a>. The iPhone didn’t exist yet; it was released a year later.</p>
<p>From a very high level, <strong>ARIA is a snapshot of the operating system interaction paradigms of this time period</strong>. This is because ARIA recreates them.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/3-wxpdefaultdesk.png"></p>
<h3>The Mindset</h3>
<p>Smartphones with features like <a href="https://jquerymobile.com/">tappable</a>, swipeable, and draggable surfaces were far less commonplace. Single Page Application “web app” experiences were also rare, with <a href="https://en.wikipedia.org/wiki/Ajax_(programming">Ajax</a>)-based approaches being the most popular. This means that we have to <strong>build the experiences of today using the technology of 2006</strong>. In a way, <strong>this is a good thing</strong>. It forces us to take new and novel experiences and interrogate them. </p>
<p>Interactions that cannot be broken down into smaller, more focused pieces that map to ARIA patterns are most likely inaccessible. This is because they won’t be able to be operated by assistive technology or function on older or less popular devices. </p>
<p>I may be biased, but I also think these sorts of novel interactions that can’t translate also serve as a warning that a general audience will find them to be <strong>confusing and, therefore, unusable</strong>. This belief is important to consider given that the internet serves: </p>
<ul>
<li>An unknown number of people,</li>
<li>Using an unknown number of devices, </li>
<li>Each with an unknown amount of personal customizations, </li>
<li>Who have their own unique needs and circumstances and </li>
<li>Have unknown motivational factors.</li>
</ul>
<h3>Interaction Expectations</h3>
<p>Contemporary expectations for keyboard-based interaction for web content — checkboxes, radios, modals, accordions, and so on — are sourced from Windows XP and its predecessor operating systems. These interaction models are carried forward as muscle memory for older people who use assistive technology. Younger people who rely on assistive technology also learn these de facto standards, thus continuing the cycle.</p>
<p>What does this mean for you? Someone using a keyboard to interact with your website or web app <strong>will most likely</strong> <a href="https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/#start-with-windows"><strong>try these Windows OS-based keyboard shortcuts first</strong></a>. This means things like pressing: </p>
<ul>
<li>Enter to navigate to a link’s destination, </li>
<li>Space to activate buttons, </li>
<li>Home and End to jump to the start or end of a list of items, and so on.</li>
</ul>
<h3>It’s Also A Living Document</h3>
<p>This is not to say that ARIA has stagnated. It is constantly being worked on with new additions, removals, and clarifications. Remember, it is now at version 1.2, with <a href="https://www.w3.org/TR/wai-aria-1.3/">version 1.3 arriving soon</a>.</p>
<p>In parallel, HTML as a language also reflects this evolution. Elements were originally created to support a document-oriented web and have been gradually evolving to <a href="https://open-ui.org/">support more dynamic, app-like experiences</a>. The great bit here is that this is all <a href="https://github.com/w3c/aria/">conducted in the open</a> and is something you can contribute to if you feel motivated to do so.</p>
ARIA Has Rules For Using It
<p>There are <a href="https://www.w3.org/TR/using-aria/#NOTES">five rules included in ARIA’s documentation</a> to help steer how you approach it:</p>
<ol>
<li>
<a href="https://www.w3.org/TR/using-aria/#firstrule">Use a native element whenever possible.</a><br>An example would be using an anchor element (<code><a></code>) for a link rather than a <code>div</code> with a click handler and a <code>role</code> of <code>link</code>.</li>
<li>
<a href="https://www.w3.org/TR/using-aria/#secondrule">Don’t adjust a native element’s semantics if at all possible.</a><br>An example would be trying to use a heading element as a tab rather than wrapping the heading in a semantically neutral <code>div</code>.</li>
<li>
<a href="https://www.w3.org/TR/using-aria/#3rdrule">Anything interactive has to be keyboard operable.</a><br>If you can’t use it with a keyboard, it isn’t accessible. Full stop.</li>
<li>
<a href="https://www.w3.org/TR/using-aria/#4thrule">Do not use <code>role="presentation"</code> or <code>aria-hidden="true"</code> on a focusable element.</a><br>This makes something intended to be interactive unable to be used by assistive technology.</li>
<li>
<a href="https://www.w3.org/TR/using-aria/#fifthrule">Interactive elements must be named.</a><br>An example of this is using the text string “Print” for a <code>button</code> element.</li>
</ol>
<p>Observing these five rules will do a lot to help you out. The following is more context to provide even more support.</p>
ARIA Has A Taxonomy
<p>There is a structured grammar to ARIA, and it is centered around roles, as well as states and properties. </p>
<h3>Roles</h3>
<p>A <a href="https://www.w3.org/TR/wai-aria/#dfn-role">Role</a> is what assistive technology reads and then announces. A lot of people refer to this in shorthand as <em>semantics</em>. <strong>HTML elements have implied roles</strong>, which is why an anchor element will be announced as a link by screen readers with no additional work.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/4-roles.png"></p>
<p><strong>Implied roles are almost always better to use</strong> if the use case calls for them. Recall <a href="https://www.w3.org/TR/using-aria/#firstrule">the first rule of ARIA</a> here. This is usually what digital accessibility practitioners refer to when they say, “Just use semantic HTML.”</p>
<p>There are many reasons for favoring implied roles. The main consideration is better guarantees of support across an unknown number of operating systems, browsers, and assistive technology combinations. </p>
<p><a href="https://www.w3.org/TR/wai-aria/#roles_categorization">Roles have categories</a>, each with its own purpose. The <a href="https://www.w3.org/TR/wai-aria/#abstract_roles">Abstract role category</a> is notable in that it is an organizing <a href="https://en.wiktionary.org/wiki/supercategory">supercategory</a> <strong>not intended to be used by authors</strong>:</p>
<blockquote>Abstract roles are used for the ontology. Authors <strong>MUST NOT</strong> use abstract roles in content.</blockquote>
<pre><code><!-- This won't work, don't do it -->
<h2 role="sectionhead">
Anatomy and physiology
</h2>
<!-- Do this instead -->
<section aria-labeledby="anatomy-and-physiology">
<h2 id="anatomy-and-physiology">
Anatomy and physiology
</h2>
</section>
</code></pre>
<p>Additionally, in the same way, you can only declare ARIA on certain things, <strong>you can only declare some ARIA as children of other ARIA declarations</strong>. An example of this is the <a href="https://www.w3.org/TR/wai-aria/#listitem">the <code>listitem</code> role</a>, which requires <a href="https://www.w3.org/TR/wai-aria/#list">a role of <code>list</code></a> to be present on its parent element.</p>
<p>So, what’s the best way to determine if a role requires a parent declaration? The answer is to <a href="https://www.w3.org/TR/wai-aria/#role_definitions">review the official definition</a>.</p>
<h3>States And Properties</h3>
<p><a href="https://www.w3.org/TR/wai-aria/#introstates">States and properties</a> are the other two main parts of ARIA‘s overall taxonomy. </p>
<p>Implicit roles are provided by semantic HTML, and explicit roles are provided by ARIA. Both describe <strong>what an element is</strong>. States <strong>describe that element’s characteristics in a way that assistive technology can understand</strong>. This is done via property declarations and their companion values.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/5-role-and-state.png"></p>
<p>ARIA states can change quickly or slowly, both as a result of human interaction as well as application state. When the state is changed as a result of human interaction, it is considered an “unmanaged state.” Here, a developer must supply the underlying JavaScript logic to control the interaction.</p>
<p>When the state changes as a result of the application (e.g., operating system, web browser, and so on), this is considered “<a href="https://www.w3.org/TR/wai-aria/#dfn-managed-state">managed state</a>.” Here, the application automatically supplies the underlying logic.</p>
How To Declare ARIA
<p>Think of ARIA as an extension of <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes">HTML attributes</a>, a suite of name/value pairs. Some values are predefined, while others are author-supplied:</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/6-predefined-author-defined.png"></p>
<p>For the examples in the previous graphic, the <code>polite</code> value for <code>aria-live</code> is one of <a href="https://w3c.github.io/aria/#aria-live">the three predefined values</a> (<code>off</code>, <code>polite</code>, and <code>assertive</code>). For <code>aria-label</code>, “Save” is a text string manually supplied by the author.</p>
<p>You declare ARIA on HTML elements the same way you declare other attributes:</p>
<pre><code><!--
Applies an id value of
"carrot" to the div
-->
<div id="carrot"></div>
<!--
Hides the content of this paragraph
element from assistive technology
-->
<p aria-hidden="true">
Assistive technology can't read this
</p>
<!--
Provides an accessible name of "Stop",
and also communicates that the button
is currently pressed. A type property
with a value of "button" prevents
browser form submission.
-->
<button
aria-label="Stop"
aria-pressed="true"
type="button">
<!-- SVG icon -->
</button>
</code></pre>
<p>Other usage notes:</p>
<ul>
<li>You can place more than one ARIA declaration on an HTML element. </li>
<li>The order of placement of ARIA when declared on an HTML element does not matter.</li>
<li>There is no limit to how many ARIA declarations can be placed on an element. Be aware that <strong>the more you add, the more complexity you introduce</strong>, and more complexity means a larger chance <a href="https://www.a11yproject.com/posts/aria-has-perfect-support/">things may break or not function as expected</a>.</li>
<li>You can declare ARIA on an HTML element and also have other non-ARIA declarations, such as <code>class</code> or <code>id</code>. The order of declarations does not matter here, either.</li>
</ul>
<p>It might also be helpful to know that boolean attributes are treated a little differently in ARIA when compared to HTML. <a href="https://hidde.blog/">Hidde de Vries</a> writes about this in his post, <a href="https://hidde.blog/boolean-attributes-in-html-and-aria-whats-the-difference/">“Boolean attributes in HTML and ARIA: what's the difference?”</a>.</p>
Not A Whole Lot Of ARIA Is “Hardcoded”
<p>In this context, “hardcoding” means directly writing a static attribute or value declaration into your component, view, or page. </p>
<p>A lot of ARIA is designed to be applied or conditionally modified dynamically based on <a href="https://www.freecodecamp.org/news/stateful-vs-stateless-architectures-explained/">application state</a> or as a response to someone’s action. An example of this is a show-and-hide disclosure pattern:</p>
<ul>
<li>
<a href="https://w3c.github.io/aria/#aria-expanded">ARIA’s <code>aria-expanded</code> attribute</a> is toggled from <code>false</code> to <code>true</code> to communicate if the disclosure is in an expanded or collapsed state.</li>
<li>
<a href="https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute">HTML’s <code>hidden</code> attribute</a> is conditionally removed or added in tandem to show or hide the disclosure’s full content area.</li>
</ul>
<div>
<pre><code><div class="disclosure-container">
<button
aria-expanded="false"
class="disclosure-toggle"
type="button">
How we protect your personal information
</button>
<div
hidden
class="disclosure-content">
<ul>
<li>Fast, accurate, thorough and non-stop protection from cyber attacks</li>
<li>Patching practices that address vulnerabilities that attackers try to exploit</li>
<li>Data loss prevention practices help to ensure data doesn't fall into the wrong hands</li>
<li>Supply risk management practices help ensure our suppliers adhere to our expectations</li>
</ul>
<p>
<a href="/security/">Learn more about our security best practices</a>.
</p>
</div>
</div>
</code></pre>
</div>
<p>A common example of a hardcoded ARIA declaration you’ll encounter on the web is <a href="https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/">making an SVG icon inside a button decorative</a>:</p>
<pre><code><button type="button>
<svg aria-hidden="true">
<!-- SVG code -->
</svg>
Save
</button>
</code></pre>
<p>Here, the string “Save” is what is required for someone to understand what the button will do when they activate it. The accompanying icon helps that understanding visually but is considered redundant and therefore <a href="https://www.w3.org/WAI/tutorials/images/decorative/">decorative</a>.</p>
Declaring An Aria Role On Something That Already Uses That Role Implicitly Does Not Make It “Extra” Accessible
<p>An implied role is all you need if you’re using semantic HTML. Explicitly declaring its role via ARIA does not confer any additional advantages.</p>
<pre><code><!--
You don't need to declare role="button" here.
Using the <button> element will make assistive
technology announce it as a button. The
role="button" declaration is redundant.
-->
<button role="button">
Save
</button>
</code></pre>
<p>You might occasionally run into these redundant declarations on <a href="https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/HTML5.html">HTML sectioning elements</a>, such as <code><main role="main"></code>, or <code><footer role="contentinfo"></code>. This isn’t needed anymore, and you can just use the <code><main></code> or <code><footer></code> elements.</p>
<p>The reason for this is historic. These declarations were done for support reasons, in that it was a stop-gap technique for assistive technology that needed to be updated to support these <a href="https://www.w3.org/html/logo/">new-at-the-time HTML elements</a>.</p>
<p>Contemporary assistive technology does not need these redundant declarations. Think of it the same way that we don’t have to use vendor prefixes for the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius">CSS <code>border-radius</code> property</a> anymore.</p>
<p><strong>Note</strong>: <em>There is an exception to this guidance. There are circumstances where certain complex and complicated markup patterns don’t work as expected for assistive technology. In these cases, we want to hardcode the implicit role as explicit ARIA to ensure it works. This assistive technology support concern is <a href="https://www.smashingmagazine.com/#the-more-aria-you-add-to-something-the-greater-the-chance-something-will-behave-unexpectedly">covered in more detail later in this post</a>.</em></p>
You Don’t Need To Say What A Control Is; That Is What Roles Are For
<p>Both implicit and explicit roles are announced by screen readers. You don’t need to include that part for things like the interactive element’s text string or <a href="https://w3c.github.io/aria/#aria-label">an <code>aria-label</code></a>.</p>
<pre><code><!-- Don't do this -->
<button
aria-label="Save button"
type="button">
<!-- Icon SVG -->
</button>
<!-- Do this instead -->
<button
aria-label="Save"
type="button">
<!-- Icon SVG -->
</button>
</code></pre>
<p>Had we used the string value of “Save button” for our Save button, a screen reader would announce it along the lines of, “Save button, button.” That’s <a href="https://theideaplace.net/tooltip-should-not-start-an-accessible-name/">redundant</a> and confusing.</p>
ARIA Roles Have Very Specific Meanings
<p>We sometimes refer to website and web app navigation colloquially as menus, especially if it’s an e-commerce-style <a href="https://www.nngroup.com/articles/mega-menus-work-well/">mega menu</a>.</p>
<p>In ARIA, <a href="https://w3c.github.io/aria/#menu">menus mean something very specific</a>. Don’t think of global or in-page navigation or the like. Think of menus in this context as what appears when you click the Edit menu button on your application’s menubar.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/7-menu.png"></p>
<p>Using a role improperly because its name seems like an appropriate fit at first glance creates confusion for people who do not have the context of the visual UI. <strong>Their expectations will be set with the announcement of the role</strong>, then subverted when it does not act the way it is supposed to.</p>
<p>Imagine if you click on a link, and instead of taking you to another webpage, it sends something completely unrelated to your printer instead. It’s sort of like that.</p>
<p>Declaring <code>role="menu"</code> is a common example of a misapplied role, but there are others. The best way to know what a role is used for? <a href="https://www.w3.org/TR/wai-aria/#role_definitions">Go straight to the source</a> and read up on it. </p>
Certain Roles Are Forbidden From Having Accessible Names
<p>These roles are <code>caption</code>, <code>code</code>, <code>deletion</code>, <code>emphasis</code>, <code>generic</code>, <code>insertion</code>, <code>paragraph</code>, <code>presentation</code>, <code>strong</code>, <code>subscript</code>, and <code>superscript</code>. </p>
<p>This means you can try and provide an accessible name for one of these elements — say via <code>aria-label</code> — but it won’t work because it’s disallowed by <a href="https://www.w3.org/TR/wai-aria-1.2/#namefromprohibited">the rules of ARIA’s grammar</a>.</p>
<div>
<pre><code><!-- This won't work-->
<strong aria-label="A 35% discount!">
$39.95
</strong>
<!-- Neither will this -->
<code title="let JavaScript example">
let submitButton = document.querySelector('button[type="submit"]');
</code>
</code></pre>
</div>
<p>For these examples, recall that the role is implicit, sourced from the declared HTML element.</p>
<p>Note here that sometimes a browser will make an attempt regardless and overwrite the author-specified string value. This overriding is a confusing act for all involved, which led to the rule being established in the first place. </p>
You Can’t Make Up ARIA And Expect It To Work
<p>I’ve witnessed some developers guess-adding CSS classes, such as <code>.background-red</code> or <code>.text-white</code>, to their markup and being rewarded if the design visually updates correctly. </p>
<p>The reason this works is that someone previously added those classes to the project. With ARIA, the people who add the content we can use are the <a href="https://www.w3.org/WAI/about/groups/ariawg/">Accessible Rich Internet Applications Working Group</a>. This means each new version of ARIA has a predefined set of properties and values. Assistive technology is then updated to parse those attributes and values, <a href="https://ericwbailey.website/published/it-needs-to-map-back-to-a-role/#edicts-still-need-to-be-carried-out">although this isn’t always a guarantee</a>.</p>
<p>Declaring ARIA, which isn’t part of that predefined set, means assistive technology won’t know what it is and consequently won’t announce it.</p>
<pre><code><!--
There is no "selectpanel" role in ARIA.
Because of this, this code will be announced
as a button and not as a select panel.
-->
<button
role="selectpanel"
type="button">
Choose resources
</button>
</code></pre>
ARIA Fails Silently
<p>This speaks to the previous section, where ARIA won’t understand words spoken to it that exist outside its limited vocabulary.</p>
<p><strong>There are no console errors for malformed ARIA</strong>. There’s also no alert dialog, beeping sound, or flashing light for your operating system, browser, or assistive technology. This fact is yet another reason why it is so important to <a href="https://webaim.org/articles/nvda/"><strong>test with actual assistive technology</strong></a>. </p>
<p><a href="https://webaim.org/articles/screenreader_testing/">You don’t have to be an expert</a> here, either. There is a good chance your code needs updating if you set something to announce as a specific <a href="https://www.w3.org/TR/wai-aria/#introstates">state</a> and assistive technology in its default configuration does not announce that state.</p>
ARIA Only Exposes The Presence Of Something To Assistive Technology
<p><strong>Applying ARIA to something does not automatically “unlock” capabilities</strong>. It <strong>only</strong> sends a hint to assistive technology about how the interactive content should behave. </p>
<p>For assistive technology like screen readers, that hint could be for how to announce something. For assistive technology like <a href="https://www.afb.org/node/16207/refreshable-braille-displays">refreshable Braille displays</a>, it could be for how it raises and lowers its pins. For example, <strong>declaring <code>role="button"</code> on a <code>div</code> element does not automatically make it clickable</strong>. You will still need to:</p>
<ul>
<li>Target the <code>div</code> element in JavaScript, </li>
<li>Tie it to a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event">click event</a>, </li>
<li>Author the interactive logic that it performs when clicked, and then </li>
<li>Accommodate <a href="https://adrianroselli.com/2022/04/brief-note-on-buttons-enter-and-space.html">all the other expected behaviors</a>.</li>
</ul>
<p>This all makes me wonder why you can’t save yourself some work and use a <code>button</code> element in the first place, but that is a different story for a different day. </p>
<p>Additionally, <strong>adjusting an element’s role via ARIA does not modify the element’s native functionality</strong>. For example, you can declare <code>role="image"</code> on a <code>div</code> element. However, attempting to declare the <code>alt</code> or <code>src</code> attributes on the <code>div</code> won’t work. This is because <code>alt</code> and <code>src</code> are <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element">not supported attributes for <code>div</code></a>.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/8-image%20element-div.png"></p>
Declaring an ARIA Role On Something Will Override Its Semantics, But Not Its Behavior
<p>This speaks to the previous section on <strong>ARIA only exposing something’s presence</strong>. Don’t forget that certain HTML elements have primary and secondary interactive capabilities built into them.</p>
<p>For example, an anchor element’s primary capability is navigating to whatever URL value is provided for its <code>href</code> attribute. Secondary capabilities for an anchor element include copying the URL value, opening it in a new tab or incognito window, and so on.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/9-right-click.png"></p>
<p>These secondary capabilities are still preserved. However, it may not be apparent to someone that they can use them — or use them in the way that they’d expect — depending on what is announced. </p>
<p>The opposite is also true. When an element has no capabilities, having its role adjusted does not grant it any new abilities. Remember, <a href="https://www.smashingmagazine.com/#aria-only-exposes-the-presence-of-something-to-assistive-technology"><strong>ARIA only announces</strong></a>. This is why that <code>div</code> with a <code>role</code> of <code>button</code> assigned to it won’t do anything when clicked if no companion JavaScript logic is also present.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/keyboard-support.png"></p>
You Will Need To Declare ARIA To Make Certain Interactions Accessible
<p>A lot of the previous content may make it seem like ARIA is something you should avoid using altogether. This isn’t true. Know that this guidance is written to help steer you to <strong>situations where HTML does not offer the capability to describe an interaction</strong> out of the box. <strong>This space is where you want to use ARIA</strong>.</p>
<p>Knowing how to identify this area requires spending some time learning what HTML elements there are, as well as what they are and are not used for. I quite like <a href="https://html5doctor.com/">HTML5 Doctor’s Element Index</a> for upskilling on this. </p>
Certain ARIA States Require Certain ARIA Roles To Be Present
<p>This is analogous to how HTML has both <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes">global attributes</a> and attributes that can only be used on a per-element basis. For example, <a href="https://w3c.github.io/aria/#aria-describedby"><code>aria-describedby</code> can be used on any HTML element</a> or role. However, <a href="https://w3c.github.io/aria/#aria-posinset"><code>aria-posinset</code> can only be used with <code>article</code>, <code>comment</code>, <code>listitem</code>, <code>menuitem</code>, <code>option</code>, <code>radio</code>, <code>row</code>, and <code>tab</code> roles</a>. Remember here that these roles can be provided by either HTML or ARIA.</p>
<p>Learning what states require which roles can be achieved by <a href="https://www.w3.org/TR/wai-aria/#state_prop_def">reading the official reference</a>. Check for the “Used in Roles” portion of each entry’s characteristics:</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/11-used-in-roles.png"></p>
<p>Automated code scanners — like <a href="https://www.deque.com/axe/">axe</a>, <a href="https://wave.webaim.org/">WAVE</a>, <a href="https://www.tpgi.com/arc-platform/arc-toolkit/">ARC Toolkit</a>, <a href="https://pa11y.org/">Pa11y</a>, <a href="https://github.com/IBMa/equal-access#equal-access">equal-access</a>, and so on — can catch this sort of thing if they are written in error. I’m a big fan of implementing these sorts of checks as part of a <a href="https://en.wikipedia.org/wiki/Continuous_integration">continuous integration</a> strategy, as it makes it a code quality concern shared across the whole team.</p>
ARIA Is More Than Web Browsers
<p>Speaking of technology that listens, it is helpful to know that the ARIA you declare <strong>instructs the browser to speak to the operating system</strong> the browser is installed on. Assistive technology then listens to <a href="https://www.w3.org/TR/wai-aria/#dfn-accessibility-tree">what the operating system reports</a>. It then communicates that to the person using the computer, tablet, smartphone, and so on.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/12-flowchart-four-steps.png"></p>
<p>A person can then instruct assistive technology to request the operating system to take action on the web content displayed in the browser. </p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/13-flowchart-four-steps.png"></p>
<p><strong>This interaction model is by design</strong>. It is done to make interaction from assistive technology indistinguishable from interaction performed without assistive technology. </p>
<p>There are a few reasons for this approach. The most important one is <a href="https://css-tricks.com/accessibility-events/">it helps <strong>preserve the privacy and autonomy</strong></a> of the <a href="https://accessaces.com/what-disabled-people-have-to-give-up-in-the-name-of-accessibility/">people who rely on assistive technologies</a>.</p>
Just Because It Exists In The ARIA Spec Does Not Mean Assistive Technology Will Support It
<p>This support issue was touched on earlier and is a difficult fact to come to terms with. </p>
<p>Contemporary developers enjoy the hard-fought, hard-won benefits of <a href="https://www.webstandards.org/">the web standards movement</a>. This means you can declare HTML and know that it will <a href="https://www.w3.org/standards/">work with every major browser</a> out there. ARIA does not have this. <strong>Each assistive technology vendor has its own interpretation of the ARIA specification</strong>. Oftentimes, these interpretations are convergent. Sometimes, they’re not. </p>
<p>Assistive technology vendors also have support roadmaps for their products. Some assistive technology vendors:</p>
<ul>
<li>Will eventually add support, </li>
<li>May never, and some </li>
<li>Might do so in a way that contradicts how other vendors choose to implement things.</li>
</ul>
<p>There is also the operating system layer to contend with, which I’ll cover in more detail in a little bit. Here, the mechanisms used to communicate with assistive technology are dusty, oft-neglected areas of software development. </p>
<p>With these layers comes a scenario where <strong>the assistive technology can support the ARIA declared, but the operating system itself cannot communicate the ARIA’s presence, or vice-versa</strong>. The reasons for this are varied but ultimately boil down to a historic lack of support, prioritization, and resources. However, I am <a href="https://aria-at.w3.org/">optimistic that this is changing</a>. </p>
<p>Additionally, <strong>there is no equivalent to <a href="https://caniuse.com/">Caniuse</a>, <a href="https://web.dev/baseline">Baseline</a>, or <a href="https://webstatus.dev/">Web Platform Status</a> for assistive technology</strong>. The closest analog we have to support checking resources is <a href="https://a11ysupport.io/">a11ysupport.io</a>, but know that it is the painstaking work of a single individual. Its content may not be up-to-date, as the work is both Herculean in its scale and Sisyphean in its scope. Because of this, I must re-stress <a href="https://www.smashingmagazine.com/2018/09/importance-manual-accessibility-testing/"><strong>the importance of manually testing with assistive technology</strong></a> to determine if the ARIA you use works as intended.</p>
<p><strong>How To Determine ARIA Support</strong></p>
<p>There are three main layers to determine if something is supported:</p>
<ol>
<li>Operating system and version.</li>
<li>Assistive technology and version,</li>
<li>Browser and browser version.</li>
</ol>
<h3>1. Operating System And Version</h3>
<p>Each operating system (e.g., Windows, macOS, Linux) has its own way of <a href="https://alistapart.com/article/semantics-to-screen-readers/">communicating what content is present to assistive technology</a>. Each piece of assistive technology has to accommodate <strong>how</strong> to parse that communication.</p>
<p>Some assistive technology is incompatible with certain operating systems. An example of this is not being able to use <a href="https://support.apple.com/guide/voiceover/get-started-vo4be8816d70/10/mac/15.0">VoiceOver</a> with Windows, or <a href="https://www.freedomscientific.com/products/software/jaws/">JAWS</a> with macOS. Furthermore, each version of each operating system has slight variations in what is reported and how. Sometimes, the operating system needs to be updated to “teach” it the updated AIRA vocabulary. Also, do not forget that things like <a href="https://github.com/FreedomScientific/standards-support/issues">bugs and regressions</a> can occur.</p>
<h3>2. Assistive Technology And Version</h3>
<p><strong>There is no “one true way” to make assistive technology</strong>. Each one is built to address different access needs and wants and is done so in an opinionated way — think how different web browsers have different features and UI. </p>
<p>Each piece of assistive technology that consumes web content has its own way of communicating this information, and <strong>this is by design</strong>. It works with what the operating system reports, filtered through things like heuristics and preferences.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/14-voice-control.png"></p>
<p>Like operating systems, assistive technology also has different versions with what each version is capable of supporting. They can also be susceptible to bugs and regressions.</p>
<p>Another two factors worth pointing out here are <strong>upgrade hesitancy</strong> and <strong>lack of financial resources</strong>. Some people who rely on assistive technology are hesitant to upgrade it. This is based on a very understandable fear of breaking an important mechanism they use to interact with the world. This, in turn, translates to scenarios like holding off on updates until absolutely necessary, as well as disabling auto-updating functionality altogether.</p>
<p>Lack of financial resources is sometimes referred to as <a href="https://stimpunks.org/glossary/crip-tax/">the disability or crip tax</a>. <a href="https://www.un.org/development/desa/disabilities/resources/factsheet-on-persons-with-disabilities/disability-and-employment.html">Employment rates tend to be lower for disabled populations</a>, and with that comes less money to spend on acquiring new technology and updating it. This concern can and does apply to operating systems, browsers, and assistive technology.</p>
<h3>3. Browser And Browser Version</h3>
<p>Some assistive technology works better with one browser compared to another. This is due to the underlying mechanics of <strong>how the browser reports its content to assistive technology</strong>. Using Firefox with NVDA is an example of this.</p>
<p>Additionally, the support for this reporting sometimes only gets added for newer versions. Unfortunately, it also means support can sometimes accidentally regress, and people don’t notice before releasing the browser update — again, this is due to a historic lack of resources and prioritization.</p>
The Less Commonly-Used The ARIA You Declare, The Greater The Chance You’ll Need To Test It
<p>Common ARIA declarations you’ll come across include, but are not limited to:</p>
<ul>
<li>
<code>aria-label</code>,</li>
<li>
<code>aria-labelledby</code>,</li>
<li>
<code>aria-describedby</code>,</li>
<li>
<code>aria-hidden</code>,</li>
<li>
<code>aria-live</code>.</li>
</ul>
<p>These are more common because they’re more supported. They are more supported because many of these declarations have been around for a while. Recall <a href="https://www.smashingmagazine.com/#just-because-it-exists-in-the-aria-spec-does-not-mean-assistive-technology-will-support-it">the previous section that discussed actual assistive technology support</a> compared to what the ARIA specification supplies.</p>
<p>Newer, more esoteric ARIA, or historically deprioritized declarations, may not have that support yet or may never. An example of how complicated this can get is <a href="https://w3c.github.io/aria/#aria-controls"><code>aria-controls</code></a>. </p>
<p><code>aria-controls</code> is a part of ARIA that has been around for a while. <a href="https://www.freedomscientific.com/products/software/jaws/">JAWS</a> had support for <code>aria-controls</code>, but then removed it after user feedback. Meanwhile, every other screen reader I’m aware of never bothered to add support.</p>
<p>What does that mean for us? Determining support, or lack thereof, is best accomplished by <strong>manual testing with assistive technology.</strong> </p>
The More ARIA You Add To Something, The Greater The Chance Something Will Behave Unexpectedly
<p>This fact takes into consideration the complexities in preferences, different levels of support, bugs, regressions, and other concerns that come with ARIA’s usage.</p>
<p>Philosophically, it’s a lot like adding more interactive complexity to your website or web app via JavaScript. The larger the surface area your code covers, <strong>the bigger the chance something unintended happens</strong>.</p>
<p>Consider the amount of ARIA added to a component or discrete part of your experience. The more of it there is declared nested into <a href="https://dom.spec.whatwg.org/">the Document Object Model (DOM)</a>, the more it interacts with parent ARIA declarations. This is because assistive technology reads what the DOM exposes to help determine intent.</p>
<p>A lot of contemporary development efforts are isolated, feature-based work that focuses on one small portion of the overall experience. Because of this, they may not take this holistic nesting situation into account. This is another reason why — you guessed it — manual testing is so important.</p>
<p>Anecdotally, <a href="https://webaim.org/projects/million/#aria">WebAIM’s annual Millions report</a> — an accessibility evaluation of the top 1,000,000 websites — touches on this phenomenon:</p>
<blockquote>
<strong>Increased ARIA usage on pages was associated with higher detected errors. The more ARIA attributes that were present, the more detected accessibility errors could be expected.</strong> This does not necessarily mean that ARIA introduced these errors (these pages are more complex), but pages typically had significantly more errors when ARIA was present.</blockquote>
Assistive Technology May Support Your Invalid ARIA Declaration
<p>There is a chance that ARIA, which is authored inaccurately, will actually function as intended with assistive technology. While <strong>I do not recommend betting on this fact to do your work</strong>, I do think it is worth mentioning when it comes to things like debugging.</p>
<p>This is due to the wide range of familiarity there is with people who author ARIA. </p>
<p>Some of the more mature assistive technology vendors try to accommodate the lower end of this familiarity. This is done in order to <strong>better enable the people who use their software to actually get what they need</strong>.</p>
<p>There isn’t an exhaustive list of what accommodations each piece of assistive technology has. Think of it like <a href="https://quandyfactory.com/blog/39/the_virtue_of_forgiving_html_parsers">the forgiving nature of a browser’s HTML parser</a>, where <strong>the ultimate goal is to render content for humans</strong>.</p>
<code>aria-label</code> Is Tricky
<p><a href="https://w3c.github.io/aria/#aria-label"><code>aria-label</code></a> is one of the most common ARIA declarations you’ll run across. It’s also one of the most misused.</p>
<p><a href="https://benmyers.dev/blog/dont-use-aria-label-on-static-text-elements/"><code>aria-label</code> can’t be applied to non-interactive HTML elements</a>, but oftentimes is. It <a href="https://adrianroselli.com/2019/11/aria-label-does-not-translate.html">can’t always be translated</a> and is oftentimes <a href="https://ericwbailey.website/published/what-they-dont-tell-you-when-you-translate-your-app/#you%E2%80%99ll-need-to-translate-%2F-localize-more-than-you-think-you-will">overlooked for localization efforts</a>. Additionally, it can make things frustrating to operate for people who use voice control software, where the visible label differs from what the underlying code uses.</p>
<p>Another problem is when it overrides an interactive element’s pre-existing accessible name. For example:</p>
<pre><code><!-- Don't do this -->
<a
aria-label="Our services"
href="/services/">
Services
</a>
</code></pre>
<p>This is a violation of <a href="https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html">WCAG Success Criterion 2.5.3: Label in Name</a>, pure and simple. I have also seen it used as a way to provide a <a href="https://adrianroselli.com/2019/10/stop-giving-control-hints-to-screen-readers.html">control hint</a>. This is also a WCAG failure, in addition to being an antipattern:</p>
<div>
<pre><code><!-- Also don't do this -->
<a
aria-label="Click this link to learn more about our unique and valuable services"
href="/services/">
Services
</a>
</code></pre>
</div>
<p>These factors — along with other considerations — are why I consider <a href="https://ericwbailey.website/published/aria-label-is-a-code-smell/"><code>aria-label</code> a code smell</a>.</p>
<code>aria-live</code> Is Even Trickier
<p>Live region announcements are <a href="https://w3c.github.io/aria/#aria-live">powered by <code>aria-live</code></a> and are an important part of communicating updates to an experience to people who use screen readers.</p>
<p>Believe me when I say that getting <code>aria-live</code> to work properly is tricky, even under the best of scenarios. I won’t belabor the specifics here. Instead, I’ll point you to <a href="https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/">“Why are my live regions not working?”</a>, a fantastic and comprehensive article published by TetraLogical.</p>
The ARIA Authoring Practices Guide Can Lead You Astray
<p>Also referred to as the APG, the <a href="https://www.w3.org/WAI/ARIA/apg/">ARIA Authoring Practices Guide</a> should be treated with a decent amount of caution.</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/15-apg-caution.png"></p>
<h3>The Downsides</h3>
<p>The guide was originally authored to help demonstrate ARIA’s capabilities. As a result, <strong>its code examples near-exclusively, overwhelmingly, and disproportionately favor ARIA</strong>. </p>
<p>Unfortunately, the APG’s latest redesign also makes it far more approachable-looking than its surrounding W3C documentation. This is coupled with <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">demonstrating UI patterns</a> in a way that signals it’s a self-serve resource whose code can be used out of the box.</p>
<p>These factors create a scenario where people assume everything can be used as presented. This is <strong>not true</strong>. </p>
<p>Recall that just because ARIA is listed in the spec <a href="https://www.smashingmagazine.com/#just-because-it-exists-in-the-aria-spec-does-not-mean-assistive-technology-will-support-it">does not necessarily guarantee it is supported</a>. Adrian Roselli writes about this in detail in his post, <a href="https://adrianroselli.com/2023/04/no-apgs-support-charts-are-not-can-i-use-for-aria.html">“No, APG’s Support Charts Are Not ‘Can I Use’ for ARIA”</a>.</p>
<p>Also, remember <a href="https://www.w3.org/TR/using-aria/#firstrule">the first rule of ARIA</a> and know that <a href="https://www.smashingmagazine.com/#aria-has-rules-for-using-it">an ARIA-first approach is counter to the specification’s core philosophy of use</a>.</p>
<p>In my experience, this has led to developers assuming they can copy-paste code examples or reference how it’s structured in their own efforts, and everything will just work. This leads to mass frustration:</p>
<ul>
<li>Digital accessibility practitioners have to explain that “doing the right thing” isn’t going to work as intended.</li>
<li>Developers then have to revisit their work to update it.</li>
<li>Most importantly, people who rely on assistive technology risk not being able to use something.</li>
</ul>
<p>This is to say nothing about things like timelines and resourcing, working relationships, reputation, and brand perception.</p>
<h3>The Upside</h3>
<p>The APG’s main strength is <strong>highlighting what keyboard keypresses people will expect to work</strong> on each pattern. </p>
<p>Consider <a href="https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction">the listbox pattern</a>. It details keypresses you may expect (arrow keys, Space, and Enter), as well as less-common ones (<a href="https://en.wikipedia.org/wiki/Typeahead">typeahead</a> selection and making multiple selections). Here, we need to <a href="https://www.smashingmagazine.com/#the-spirit-of-aria-reflects-the-era-in-which-it-was-created">remember that ARIA is based on the Windows XP era</a>. The keyboard-based interaction the APG suggests is built from the muscle memory established from the UI patterns used on this operating system.</p>
<p>While your tree view component may look visually different from the one on your operating system, <a href="https://github.blog/engineering/user-experience/considerations-for-making-a-tree-view-component-accessible/#start-with-windows">people will expect it to be keyboard operable in the same way</a>. Honoring this expectation will go a long way to <strong>ensuring your experiences are not only accessible but also intuitive and efficient to use</strong>.</p>
<p>Another strength of the APG is giving <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">standardized, centralized names to UI patterns</a>. Is it a dropdown? A listbox? A combobox? A select menu? <a href="https://adrianroselli.com/2020/03/stop-using-drop-down.html">Something else</a>? </p>
<p>When it comes to digital accessibility, these terms all have specific meanings, as well as expectations that come with them. Having a common vocabulary when discussing how an experience should work goes a long way to <strong>ensuring everyone will be on the same page</strong> when it comes time to make and maintain things.</p>
macOS VoiceOver Can Also Lead You Astray
<p><a href="https://support.apple.com/guide/voiceover/welcome/mac">VoiceOver on macOS</a> has been <a href="https://www.applevis.com/forum/macos-mac-apps/state-screen-readers-macos">experiencing a lot of problems</a> over the last few years. If I could wager a guess as to why this is, as an outsider, it is that Apple’s priorities are <a href="https://www.apple.com/visionos/visionos-2/">focused elsewhere</a>.</p>
<p>The bulk of web development efforts are conducted on macOS. This means that well-intentioned developers will reach for VoiceOver, as it comes bundled with macOS and is therefore more convenient. However, macOS VoiceOver usage has a drastic minority share for desktops and laptops. It is under 10% of usage, with Windows-based JAWS and NVDA occupying a combined 78.2% majority share:</p>
<p><img src="https://files.smashing.media/articles/what-i-wish-someone-told-me-aria/16-webaim-pie-chart.png"></p>
<h3>The Problem</h3>
<p>The sad, sorry truth of the matter is that macOS VoiceOver, in its current state, has a lot of problems. It should only be used to confirm that it can operate the experience the way Windows-based screen readers can. </p>
<p>This means testing on Windows with NVDA or JAWS will <strong>create an experience that is far more accurate to what most people who use screen readers on a laptop or desktop will experience</strong>. </p>
<h3>Dealing With The Problem</h3>
<p>Because of this situation, I heavily encourage a workflow that involves:</p>
<ol>
<li>Creating an experience’s underlying markup,</li>
<li>Testing it with NVDA or JAWS to set up baseline expectations, </li>
<li>Testing it with macOS VoiceOver to identify what doesn’t work as expected.</li>
</ol>
<p>Most of the time, I find myself having to <a href="https://www.smashingmagazine.com/#declaring-an-aria-role-on-something-that-already-uses-that-role-implicitly-does-not-make-it-extra-accessible">declare redundant ARIA on the semantic HTML I write</a> in order to address missed expected announcements for macOS VoiceOver. </p>
<p><strong>macOS VoiceOver testing is still important to do</strong>, as it is not the fault of the person who uses macOS VoiceOver to get what they need, and we should ensure they can still have access.</p>
<p>You can use apps like <a href="https://www.virtualbox.org/">VirtualBox</a> and <a href="https://www.microsoft.com/en-us/evalcenter/evaluate-windows-11-enterprise">Windows evaluation Virtual Machines</a> to use Windows in your macOS development environment. Services like <a href="https://assistivlabs.com/">AssistivLabs</a> also make on-demand, preconfigured testing easy.</p>
<p><strong>What About iOS VoiceOver?</strong></p>
<p>Despite sharing the same name, <a href="https://support.apple.com/guide/iphone/turn-on-and-practice-voiceover-iph3e2e415f/ios">VoiceOver on iOS</a> is a completely different animal. As software, it is separate from its desktop equivalent and also enjoys <a href="https://webaim.org/projects/screenreadersurvey10/#mobileplatforms">a whopping 70.6% usage share</a>. </p>
<p>With this knowledge, know that it’s also important to <strong>test the ARIA you write on mobile</strong> to make sure it works as intended.</p>
You Can Style ARIA
<p>ARIA attributes can be targeted via CSS the way other HTML attributes can. Consider this HTML markup for the main navigation portion of a small e-commerce site:</p>
<pre><code><nav aria-label="Main">
<ul>
<li>
<a href="/home/">Home</a>
<a href="/products/">Products</a>
<a aria-current="true" href="/about-us/">About Us</a>
<a href="/contact/">Contact</a>
</li>
</ul>
</nav>
</code></pre>
<p>The presence of <code>aria-current="true"</code> on the “About Us” link will tell assistive technology to <a href="https://tink.uk/using-the-aria-current-attribute/">announce that it is the current part of the site someone is on</a> if they are navigating through the main site navigation.</p>
<p>We can also tie that indicator of being the current part of the site into something that is shown visually. Here’s how you can target the attribute in CSS:</p>
<pre><code>nav[aria-label="Main"] [aria-current="true"] {
border-bottom: 2px solid #ffffff;
}
</code></pre>
<p>This is <strong>an incredibly powerful way to</strong> <a href="https://css-tricks.com/user-facing-state/"><strong>tie application state to user-facing state</strong></a>. Combine it with modern CSS like <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has"><code>:has()</code></a> and <a href="https://developer.chrome.com/docs/web-platform/view-transitions">view transitions</a> and you have the ability to create robust, sophisticated UI with less reliance on JavaScript.</p>
You Can Also Use ARIA When Writing UI Tests
<p><a href="https://en.wikipedia.org/wiki/Software_testing">Tests</a> are great. They help guarantee that the code you work on will continue to do what you intended it to do.</p>
<p>A lot of web UI-based testing will use the presence of classes (e.g., <code>.is-expanded</code>) or data attributes (ex, <code>data-expanded</code>) to verify a UI’s existence, position and states. These types of selectors also have a far greater likelihood to be changed as time goes on when compared to semantic code and ARIA declarations. </p>
<p>This is something my coworker Cam McHenry touches on in his great post, <a href="https://camchenry.com/blog/how-i-write-accessible-playwright-tests">“How I write accessible Playwright tests”</a>. Consider this piece of <a href="https://playwright.dev/">Playwright</a> code, which checks for the presence of a button that toggles open an edit menu:</p>
<div>
<pre><code>// Selects an element with a role of <code>button</code>
// that has an accessible name of "Edit"
const editMenuButton = await page.getByRole('button', { name: "Edit" });
// Requires the edit button to have a property
// of <code>aria-haspopup</code> with a value of <code>true</code>
expect(editMenuButton).toHaveAttribute('aria-haspopup', 'true');
</code></pre>
</div>
<p>The test selects UI based on outcome rather than appearance. That’s <strong>a far more reliable way to target things in the long-term</strong>.</p>
<p>This all helps to create a virtuous feedback cycle. It enshrines semantic HTML and ARIA’s presence in your front-end UI code, which helps to guarantee accessible experiences don’t regress. Combining this with styling, you have a <strong>powerful, self-contained system for building robust, accessible experiences</strong>. </p>
ARIA Is Ultimately About Caring About People
<p>Web accessibility can be about enabling important things like scheduling medical appointments. It is also about fun things like chatting with your friends. It’s also used for every web experience that lives in between. </p>
<p>Using semantic HTML — supplemented with a judicious application of ARIA — helps you enable these experiences. To sum things up, ARIA:</p>
<ul>
<li>Has been around for a long time, and its spirit reflects the era in which it was first created;</li>
<li>Has a governing taxonomy, vocabulary, and rules for use and is declared in the same way HTML attributes are;</li>
<li>Is mostly used for dynamically updating things, controlled via JavaScript;</li>
<li>Has highly specific use cases in mind for each of its roles;</li>
<li>Fails silently if mis-authored;</li>
<li>Only exposes the presence of something to assistive technology and does not confer interactivity;</li>
<li>Requires input from the web browser, but also the operating system, in order for assistive technology to use it;</li>
<li>Has a range of actual support, complicated by the more of it you use;</li>
<li>Has some things to watch out for, namely <code>aria-label</code>, the ARIA Authoring Practices Guide, and macOS VoiceOver support;</li>
<li>Can also be used for things like visual styling and writing resilient tests;</li>
<li>Is best evaluated by using actual assistive technology.</li>
</ul>
<p>Viewed one way, ARIA is arcane, full of misconceptions, and fraught with potential missteps. Viewed another, ARIA is a beautiful and elegant way to programmatically communicate the interactivity and state of a user interface.</p>
<p>I choose the second view. At the end of the day, using ARIA helps to <strong>ensure that disabled people can use a web experience the same way everyone else can</strong>. </p>
<p><em>Thank you to <a href="https://adrianroselli.com/">Adrian Roselli</a> and <a href="https://janmaarten.com/">Jan Maarten</a> for their feedback.</em></p>
<h3>Further Reading</h3>
<ul>
<li>“<a href="https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility">What the Heck is ARIA? A Beginner’s Guide to ARIA for Accessibility</a>,” Kat Shaw</li>
<li>“<a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a>,” Léonie Watson & Chaals McCathie Nevile</li>
<li>“<a href="https://alistapart.com/article/semantics-to-screen-readers/">Semantics to Screen Readers</a>,” Melanie Richards</li>
<li>“<a href="https://www.tpgi.com/what-aria-does-not-do/">What ARIA does not do</a>,” Steve Faulkner</li>
<li>“<a href="https://html5accessibility.com/stuff/2024/07/15/what-aria-still-does-not-do/">What ARIA still does not do</a>,” stevef</li>
<li>“<a href="https://www.deque.com/blog/apg-support-tables-why-they-matter/">APG support tables — why they matter</a>,” Michael Fairchild</li>
<li>“<a href="https://adrianroselli.com/2023/02/aria-vs-html.html">ARIA vs HTML</a>,” Adrian Roselli</li>
</ul>
<p>I recently came across an old jQuery tutorial demonstrating a <strong>“moving highlight” navigation bar</strong> and decided the concept was due for a modern upgrade. With this pattern, the border around the active navigation item animates directly from one element to another as the user clicks on menu items. In 2025, we have much better tools to manipulate the DOM via vanilla JavaScript. New features like the <a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API">View Transition API</a> make progressive enhancement more easily achievable and handle a lot of the animation minutiae.</p>
<a href="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/1-moving-highlight-navigation-bar.gif"><img src="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/1-moving-highlight-navigation-bar.gif"></a>(<a href="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/1-moving-highlight-navigation-bar.gif">Large preview</a>)
<p>In this tutorial, I will demonstrate two methods of creating the “moving highlight” navigation bar using plain JavaScript and CSS. The first example uses the <code>getBoundingClientRect</code> method to explicitly animate the border between navigation bar items when they are clicked. The second example achieves the same functionality using the new View Transition API.</p>
The Initial Markup
<p>Let’s assume that we have a single-page application where content changes without the page being reloaded. The starting HTML and CSS are your standard navigation bar with an additional <code>div</code> element containing an <code>id</code> of <code>#highlight</code>. We give the first navigation item a class of <code>.active</code>.</p>
<p>See the Pen <a href="https://codepen.io/smashingmag/pen/EajQyBW">Moving Highlight Navbar Starting Markup [forked]</a> by <a href="https://codepen.io/blakeeric">Blake Lundquist</a>.</p>
<p>For this version, we will position the <code>#highlight</code> element around the element with the <code>.active</code> class to create a border. We can utilize <code>absolute</code> positioning and animate the element across the navigation bar to create the desired effect. We’ll hide it off-screen initially by adding <code>left: -200px</code> and include <code>transition</code> styles for all properties so that any changes in the position and size of the element will happen gradually.</p>
<pre><code>#highlight {
z-index: 0;
position: absolute;
height: 100%;
width: 100px;
left: -200px;
border: 2px solid green;
box-sizing: border-box;
transition: all 0.2s ease;
}
</code></pre>
Add A Boilerplate Event Handler For Click Interactions
<p>We want the highlight element to animate when a user changes the <code>.active</code> navigation item. Let’s add a <code>click</code> event handler to the <code>nav</code> element, then filter for events caused only by elements matching our desired selector. In this case, we only want to change the <code>.active</code> nav item if the user clicks on a link that does not already have the <code>.active</code> class.</p>
<p>Initially, we can call <code>console.log</code> to ensure the handler fires only when expected:</p>
<div>
<pre><code>const navbar = document.querySelector('nav');
navbar.addEventListener('click', function (event) {
// return if the clicked element doesn't have the correct selector
if (!event.target.matches('nav a:not(active)')) {
return;
}
console.log('click');
});
</code></pre>
</div>
<p>Open your browser console and try clicking different items in the navigation bar. You should only see <code>"click"</code> being logged when you select a new item in the navigation bar. </p>
<p>Now that we know our event handler is working on the correct elements let’s add code to move the <code>.active</code> class to the navigation item that was clicked. We can use the object passed into the event handler to find the element that initialized the event and give that element a class of <code>.active</code> after removing it from the previously active item.</p>
<div>
<pre><code>const navbar = document.querySelector('nav');
navbar.addEventListener('click', function (event) {
// return if the clicked element doesn't have the correct selector
if (!event.target.matches('nav a:not(active)')) {
return;
}
- console.log('click');
+ document.querySelector('nav a.active').classList.remove('active');
+ event.target.classList.add('active');
});
</code></pre>
</div>
<p>Our <code>#highlight</code> element needs to move across the navigation bar and position itself around the active item. Let’s write a function to calculate a new position and width. Since the <code>#highlight</code> selector has <code>transition</code> styles applied, it will move gradually when its position changes. </p>
<p>Using <code>getBoundingClientRect</code>, we can get information about the position and size of an element. We calculate the width of the active navigation item and its offset from the left boundary of the parent element. Then, we assign styles to the highlight element so that its size and position match.</p>
<div>
<pre><code>// handler for moving the highlight
const moveHighlight = () => {
const activeNavItem = document.querySelector('a.active');
const highlighterElement = document.querySelector('#highlight');
const width = activeNavItem.offsetWidth;
const itemPos = activeNavItem.getBoundingClientRect();
const navbarPos = navbar.getBoundingClientRect()
const relativePosX = itemPos.left - navbarPos.left;
const styles = {
left: <code>${relativePosX}px</code>,
width: <code>${width}px</code>,
};
Object.assign(highlighterElement.style, styles);
}
</code></pre>
</div>
<p>Let’s call our new function when the click event fires:</p>
<div>
<pre><code>navbar.addEventListener('click', function (event) {
// return if the clicked element doesn't have the correct selector
if (!event.target.matches('nav a:not(active)')) {
return;
}
document.querySelector('nav a.active').classList.remove('active');
event.target.classList.add('active');
+ moveHighlight();
});
</code></pre>
</div>
<p>Finally, let’s also call the function immediately so that the border moves behind our initial active item when the page first loads:</p>
<pre><code>// handler for moving the highlight
const moveHighlight = () => {
// ...
}
// display the highlight when the page loads
moveHighlight();
</code></pre>
<p>Now, the border moves across the navigation bar when a new item is selected. Try clicking the different navigation links to animate the navigation bar.</p>
<p>See the Pen <a href="https://codepen.io/smashingmag/pen/WbvMxqV">Moving Highlight Navbar [forked]</a> by <a href="https://codepen.io/blakeeric">Blake Lundquist</a>.</p>
<p>That only took a few lines of vanilla JavaScript and could easily be extended to account for other interactions, like <code>mouseover</code> events. In the next section, we will explore refactoring this feature using the View Transition API.</p>
Using The View Transition API
<p>The View Transition API provides functionality to create animated transitions between website views. Under the hood, the API creates snapshots of “before” and “after” views and then handles transitioning between them. View transitions are useful for creating animations between documents, providing the <strong>native-app-like user experience</strong> featured in frameworks like <a href="https://docs.astro.build/en/guides/view-transitions/">Astro</a>. However, the API also provides handlers meant for <strong>SPA-style applications</strong>. We will use it to reduce the JavaScript needed in our implementation and more easily create fallback functionality.</p>
<p>For this approach, we no longer need a separate <code>#highlight</code> element. Instead, we can style the <code>.active</code> navigation item directly using pseudo-selectors and let the View Transition API handle the animation between the before-and-after UI states when a new navigation item is clicked. </p>
<p>We’ll start by getting rid of the <code>#highlight</code> element and its associated CSS and replacing it with styles for the <code>nav a::after</code> pseudo-selector:</p>
<pre><code><nav>
- <div id="highlight"></div>
<a href="#" class="active">Home</a>
<a href="#services">Services</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</code></pre>
<pre><code>- #highlight {
- z-index: 0;
- position: absolute;
- height: 100%;
- width: 0;
- left: 0;
- box-sizing: border-box;
- transition: all 0.2s ease;
- }
+ nav a::after {
+ content: " ";
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ border: none;
+ box-sizing: border-box;
+ }
</code></pre>
<p>For the <code>.active</code> class, we include the <code>view-transition-name</code> property, thus unlocking the magic of the View Transition API. Once we trigger the view transition and change the location of the <code>.active</code> navigation item in the DOM, “before” and “after” snapshots will be taken, and the browser will animate the border across the bar. We’ll give our view transition the name of <code>highlight</code>, but we could theoretically give it any name.</p>
<pre><code>nav a.active::after {
border: 2px solid green;
view-transition-name: highlight;
}
</code></pre>
<p>Once we have a selector that contains a <code>view-transition-name</code> property, the only remaining step is to trigger the transition using the <code>startViewTransition</code> method and pass in a callback function.</p>
<div>
<pre><code>const navbar = document.querySelector('nav');
// Change the active nav item on click
navbar.addEventListener('click', async function (event) {
if (!event.target.matches('nav a:not(.active)')) {
return;
}
document.startViewTransition(() => {
document.querySelector('nav a.active').classList.remove('active');
event.target.classList.add('active');
});
});
</code></pre>
</div>
<p>Above is a revised version of the <code>click</code> handler. Instead of doing all the calculations for the size and position of the moving border ourselves, the View Transition API handles all of it for us. We only need to call <code>document.startViewTransition</code> and pass in a callback function to change the item that has the <code>.active</code> class!</p>
Adjusting The View Transition
<p>At this point, when clicking on a navigation link, you’ll notice that the transition works, but some strange sizing issues are visible.</p>
<a href="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/2-view-transition-sizing-issues.gif"><img src="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/2-view-transition-sizing-issues-800px.gif"></a>(<a href="https://files.smashing.media/articles/creating-moving-highlight-navigation-bar-vanilla-javascript/2-view-transition-sizing-issues.gif">Large preview</a>)
<p>This sizing inconsistency is caused by aspect ratio changes during the course of the view transition. We won’t go into detail here, but <a href="https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/">Jake Archibald has a detailed explanation you can read</a> for more information. In short, to ensure the height of the border stays uniform throughout the transition, we need to declare an explicit <code>height</code> for the <code>::view-transition-old</code> and <code>::view-transition-new</code> pseudo-selectors representing a static snapshot of the old and new view, respectively.</p>
<pre><code>::view-transition-old(highlight) {
height: 100%;
}
::view-transition-new(highlight) {
height: 100%;
}
</code></pre>
<p>Let’s do some final refactoring to tidy up our code by moving the callback to a separate function and adding a fallback for when view transitions aren’t supported:</p>
<div>
<pre><code>const navbar = document.querySelector('nav');
// change the item that has the .active class applied
const setActiveElement = (elem) => {
document.querySelector('nav a.active').classList.remove('active');
elem.classList.add('active');
}
// Start view transition and pass in a callback on click
navbar.addEventListener('click', async function (event) {
if (!event.target.matches('nav a:not(.active)')) {
return;
}
// Fallback for browsers that don't support View Transitions:
if (!document.startViewTransition) {
setActiveElement(event.target);
return;
}
document.startViewTransition(() => setActiveElement(event.target));
});
</code></pre>
</div>
<p>Here’s our view transition-powered navigation bar! Observe the smooth transition when you click on the different links.</p>
<p>See the Pen <a href="https://codepen.io/smashingmag/pen/ogXELKE">Moving Highlight Navbar with View Transition [forked]</a> by <a href="https://codepen.io/blakeeric">Blake Lundquist</a>.</p>
Conclusion
<p>Animations and transitions between website UI states used to require many kilobytes of external libraries, along with verbose, confusing, and error-prone code, but vanilla JavaScript and CSS have since incorporated features to achieve <strong>native-app-like interactions without breaking the bank</strong>. We demonstrated this by implementing the “moving highlight” navigation pattern using two approaches: CSS transitions combined with the <code>getBoundingClientRect()</code> method and the View Transition API. </p>
<h3>Resources</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect"><code>getBoundingClientRect()</code> method documentation</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API">View Transition API documentation</a></li>
<li>“<a href="https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/">View Transitions: Handling Aspect Ratio Changes</a>” by Jake Archibald</li>
</ul>
<p>In a previous article, we looked at some <a href="https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/">practical examples of how to code SVG by hand</a>. In that guide, we covered the basics of the SVG elements <code>rect</code>, <code>circle</code>, <code>ellipse</code>, <code>line</code>, <code>polyline</code>, and <code>polygon</code> (and also <code>g</code>).</p>
<p>This time around, we are going to tackle a more advanced topic, the absolute powerhouse of SVG elements: <code>path</code>. Don’t get me wrong; I still stand by my point that image paths are better drawn in vector programs than coded (unless you’re the type of creative who makes non-logical visual art in code — then go forth and create awe-inspiring wonders; you’re probably not the audience of this article). But when it comes to <strong>technical drawings</strong> and <strong>data visualizations</strong>, the <code>path</code> element unlocks a wide array of possibilities and opens up the world of hand-coded SVGs. </p>
<p>The path syntax can be really complex. We’re going to tackle it in two separate parts. In this first installment, we’re learning all about <strong>straight and angular paths</strong>. In the second part, we’ll make lines bend, twist, and turn.</p>
Required Knowledge And Guide Structure
<p><strong>Note</strong>: <em>If you are unfamiliar with the basics of SVG, such as the subject of <code>viewBox</code> and the basic syntax of the simple elements (<code>rect</code>, <code>line</code>, <code>g</code>, and so on), I recommend reading <a href="https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/">my guide</a> before diving into this one. You should also <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/text">familiarize yourself with <code><text></code></a> if you want to understand each line of code in the examples.</em></p>
<p>Before we get started, I want to quickly recap how I code SVG using JavaScript. I don’t like dealing with numbers and math, and reading SVG Code with numbers filled into every attribute makes me lose all understanding of it. By giving coordinates names and having all my math easy to parse and write out, I have a much better time with this type of code, and I think you will, too.</p>
<p>The goal of this article is more about <strong>understanding <code>path</code> syntax</strong> than it is about doing placement or how to leverage loops and other more basic things. So, I will not run you through the entire setup of each example. I’ll instead share snippets of the code, but they may be slightly adjusted from the CodePen or simplified to make this article easier to read. However, if there are specific questions about code that are not part of the text in the CodePen demos, the comment section is open.</p>
<p>To keep this all framework-agnostic, the code is written in vanilla JavaScript (though, really, TypeScript is your friend the more complicated your SVG becomes, and I missed it when writing some of these).</p>
Setting Up For Success
<p>As the <code>path</code> element relies on our understanding of some of the coordinates we plug into the commands, I think it is a lot easier if we have a bit of visual orientation. So, all of the examples will be coded on top of a visual representation of a traditional <code>viewBox</code> setup with the origin in the top-left corner (so, values in the shape of <code>0 0 ${width} ${height}</code>.</p>
<p>I added text labels as well to make it easier to point you to specific areas within the grid.</p>
<blockquote>Please note that I recommend being careful when adding text within the <code><text></code> element in SVG if you want your text to be accessible. If the graphic relies on text scaling like the rest of your website, it would be better to have it rendered through HTML. But for our examples here, it should be sufficient.</blockquote>
<p>So, this is what we’ll be plotting on top of:</p>
<p>See the Pen <a href="https://codepen.io/smashingmag/pen/MYwEdVN">SVG Viewbox Grid Visual [forked]</a> by <a href="https://codepen.io/mynimi">Myriam</a>.</p>
<p>Alright, we now have a ViewBox Visualizing Grid. I think we’re ready for our first session with the beast.</p>
Enter <code>path</code> And The All-Powerful <code>d</code> Attribute
<p>The <code><path></code> element has a <code>d</code> attribute, which speaks its own language. So, within <code>d</code>, you’re talking in terms of “commands”. </p>
<p>When I think of <code>non-path</code> versus <code>path</code> elements, I like to think that the reason why we have to write much more complex drawing instructions is this: <strong>All non-path elements are just dumber paths.</strong> In the background, they have one pre-drawn path shape that they will always render based on a few parameters you pass in. But <code>path</code> has no default shape. The shape logic has to be exposed to you, while it can be neatly hidden away for all other elements.</p>
<p>Let’s learn about those commands.</p>
Where It All Begins: <code>M</code>
<p>The first, which is where each path begins, is the <code>M</code> command, which moves the pen to a point. This command places your starting point, but it <strong>does not draw a single thing</strong>. A path with just an <code>M</code> command is an <code>auto-delete</code> when cleaning up SVG files.</p>
<p>It takes two arguments: the <code>x</code> and <code>y</code> coordinates of your start position.</p>
<pre><code>const uselessPathCommand = `M${start.x} ${start.y}`;
</code></pre>
Basic Line Commands: <code>M</code> , <code>L</code>, <code>H</code>, <code>V</code>
<p>These are fun and easy: <code>L</code>, <code>H</code>, and <code>V</code>, all draw a line from the current point to the point specified.</p>
<p><code>L</code> takes <strong>two arguments</strong>, the <code>x</code> and <code>y</code> positions of the point you want to draw to.</p>
<pre><code>const pathCommandL = `M${start.x} ${start.y} L${end.x} ${end.y}`;
</code></pre>
<p><code>H</code> and <code>V</code>, on the other hand, only take <strong>one argument</strong> because they are only drawing a line in one direction. For <code>H</code>, you specify the <code>x</code> position, and for <code>V</code>, you specify the <code>y</code> position. The other value is implied.</p>
<pre><code>const pathCommandH = `M${start.x} ${start.y} H${end.x}`;
const pathCommandV = `M${start.x} ${start.y} V${end.y}`;
</code></pre>
<p>To visualize how this works, I created a function that draws the path, as well as points with labels on them, so we can see what happens.</p>
<p>See the Pen <a href="https://codepen.io/smashingmag/pen/azOLrjZ">Simple Lines with path [forked]</a> by <a href="https://codepen.io/mynimi">Myriam</a>.</p>
<p>We have three lines in that image. The <code>L</code> command is used for the red path. It starts with <code>M</code> at <code>(10,10)</code>, then moves diagonally down to <code>(100,100)</code>. The command is: <code>M10 10 L100 100</code>.</p>
<p>The blue line is horizontal. It starts at <code>(10,55)</code> and should end at <code>(100, 55)</code>. We could use the <code>L</code> command, but we’d have to write <code>55</code> again. So, instead, we write <code>M10 55 H100</code>, and then SVG knows to look back at the <code>y</code> value of <code>M</code> for the <code>y</code> value of <code>H</code>.</p>
<p>It’s the same thing for the green line, but when we use the <code>V</code> command, SVG knows to refer back to the <code>x</code> value of <code>M</code> for the <code>x</code> value of <code>V</code>.</p>
<p>If we compare the resulting horizontal path with the same implementation in a <code><line></code> element, we may</p>
<ol>
<li>Notice how much more efficient <code>path</code> can be, and</li>
<li>Remove quite a bit of meaning for anyone who doesn’t speak <code>path</code>.</li>
</ol>
<p>Because, as we look at these strings, one of them is called “line”. And while the rest doesn’t mean anything out of context, the line definitely conjures a specific image in our heads.</p>
<pre><code><path d="M 10 55 H 100" />
<line x1="10" y1="55" x2="100" y2="55" />
</code></pre>
Making Polygons And Polylines With <code>Z</code>
<p>In the previous section, we learned how <code>path</code> can behave like <code><line></code>, which is pretty cool. But it can do more. It can also act like <code>polyline</code> and <code>polygon</code>.</p>
<p>Remember, how those two basically work the same, but <code>polygon</code> connects the first and last point, while <code>polyline</code> does not? The <code>path</code> element can do the same thing. There is a separate command to close the path with a line, which is the <code>Z</code> command.</p>
<div>
<pre><code>const polyline2Points = <code>M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y}</code>;
const polygon2Points = <code>M${start.x} ${start.y} L${p1.x} ${p1.y} L${p2.x} ${p2.y} Z</code>;
</code></pre>
</div>
<p>So, let’s see this in action and create a repeating triangle shape. Every odd time, it’s open, and every even time, it’s closed. Pretty neat!</p>
<p>See the Pen <a href="https://codepen.io/smashingmag/pen/emNGaPm">Alternating Triangles [forked]</a> by <a href="https://codepen.io/mynimi">Myriam</a>.</p>
<p>When it comes to comparing <code>path</code> versus <code>polygon</code> and <code>polyline</code>, the other tags tell us about their names, but I would argue that fewer people know what a polygon is versus what a line is (and probably even fewer know what a polyline is. Heck, even the program I’m writing this article in tells me polyline is not a valid word). The argument to use these two tags over <code>path</code> for legibility is weak, in my opinion, and I guess you’d probably agree that this looks like equal levels of meaningless string given to an SVG element.</p>
<pre><code><path d="M0 0 L86.6 50 L0 100 Z" />
<polygon points="0,0 86.6,50 0,100" />
<path d="M0 0 L86.6 50 L0 100" />
<polyline points="0,0 86.6,50 0,100" />
</code></pre>
Relative Commands: <code>m</code>, <code>l</code>, <code>h</code>, <code>v</code>
<p>All of the line commands exist in absolute and relative versions. The difference is that the relative commands are lowercase, e.g., <code>m</code>, <code>l</code>, <code>h</code>, and <code>v</code>. The relative commands are always relative to the last point, so instead of declaring an <code>x</code> value, you’re declaring a <code>dx</code> value, saying this is how many units you’re moving.</p>
<p>Before we look at the example visually, I want you to look at the following three-line commands. Try not to look at the CodePen beforehand.</p>
<pre><code>const lines = [
{ d: `M10 10 L 10 30 L 30 30`, color: "var(--_red)" },
{ d: `M40 10 l 0 20 l 20 0`, color: "var(--_blue)" },
{ d: `M70 10 l 0 20 L 90 30`, color: "var(--_green)" }
];
</code></pre>
<p>As I mentioned, I hate looking at numbers without meaning, but there is one number whose meaning is pretty constant in most contexts: <code>0</code>. Seeing a <code>0</code> in combination with a command I just learned means <em>relative</em> manages to instantly tell me that nothing is happening. Seeing <code>l 0 20</code> by itself tells me that this line only moves along one axis instead of two. </p>
<p>And looking at that entire blue path command, the repeated <code>20</code> value gives me a sense that the shape might have some regularity to it. The first path does a bit of that by repeating <code>10</code> and <code>30</code>. But the third? As someone who can’t do math in my head, that third string gives me <em>nothing</em>.</p>
<p>Now, you might be surprised, but they all draw the same shape, just in different places.</p>
<p>See the Pen <a href="https://codepen.io/smashingmag/pen/vEOewQp">SVG Compound Paths [forked]</a> by <a href="https://codepen.io/mynimi">Myriam</a>.</p>
<p>So, how valuable is it that we can recognize the regularity in the blue path? Not very, in my opinion. In some cases, going with the relative value is easier than an absolute one. In other cases, the absolute is king. Neither is better nor worse.</p>
<blockquote>And, in all cases, that previous example would be much more efficient if it were set up with a variable for the gap, a variable for the shape size, and a function to generate the path definition that’s called from within a loop so it can take in the index to properly calculate the start point.</blockquote>
Jumping Points: How To Make Compound Paths
<p>Another very useful thing is something you don’t see visually in the previous CodePen, but it relates to the grid and its code.</p>
<p>I snuck in a grid drawing update.</p>
<p>With the method used in earlier examples, using <code>line</code> to draw the grid, the above CodePen would’ve rendered the grid with 14 separate elements. If you go and inspect the final code of that last CodePen, you’ll notice that there is just a single path element within the <code>.grid</code> group.</p>
<p>It looks like this, which is not fun to look at but holds the secret to how it’s possible:</p>
<div>
<pre><code><path d="M0 0 H110 M0 10 H110 M0 20 H110 M0 30 H110 M0 0 V45 M10 0 V45 M20 0 V45 M30 0 V45 M40 0 V45 M50 0 V45 M60 0 V45 M70 0 V45 M80 0 V45 M90 0 V45" stroke="currentColor" stroke-width="0.2" fill="none"></path>
</code></pre>
</div>
<p>If we take a close look, we may notice that there are multiple <code>M</code> commands. This is the magic of compound paths. </p>
<blockquote>Since the <code>M/m</code> commands don’t actually draw and just place the cursor, a <code>path</code> can have jumps.</blockquote>
<p>So, whenever we have multiple paths that share common styling and don’t need to have separate interactions, we can just chain them together to make our code shorter.</p>
Coming Up Next
<p>Armed with this knowledge, we’re now able to replace <code>line</code>, <code>polyline</code>, and <code>polygon</code> with <code>path</code> commands and combine them in compound paths. But there is so much more to uncover because <code>path</code> doesn’t just offer foreign-language versions of lines but also gives us the option to code <code>circles</code> and <code>ellipses</code> that have open space and can sometimes also bend, twist, and turn. We’ll refer to those as <em>curves</em> and <em>arcs</em>, and discuss them more explicitly in the next article.</p>
<h3>Further Reading On SmashingMag</h3>
<ul>
<li>“<a href="https://www.smashingmagazine.com/2024/12/mastering-svg-arcs/">Mastering SVG Arcs</a>,” Akshay Gupta</li>
<li>“<a href="https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/">Accessible SVGs: Perfect Patterns For Screen Reader Users</a>,” Carie Fisher</li>
<li>“<a href="https://www.smashingmagazine.com/2023/01/svg-customization-animation-practical-guide/">Easy SVG Customization And Animation: A Practical Guide</a>,” Adrian Bece</li>
<li>“<a href="https://www.smashingmagazine.com/2022/05/magical-svg-techniques/">Magical SVG Techniques</a>,” Cosima Mielke</li>
</ul>
<p>When people talk about UX, it’s usually about the things they can see and interact with, like wireframes and prototypes, smart interactions, and design tools like Figma, Miro, or Maze. Some of the outputs are even glamorized, like design systems, research reports, and pixel-perfect UI designs. But here’s the truth I’ve seen again and again in over two decades of working in UX: none of that moves the needle if there is no collaboration.</p>
<p><strong>Great UX doesn’t happen in isolation.</strong> It happens through conversations with engineers, product managers, customer-facing teams, and the customer support teams who manage support tickets. Amazing UX ideas come alive in messy Miro sessions, cross-functional workshops, and those online chats (e.g., Slack or Teams) where people align, adapt, and co-create.</p>
<p>Some of the most impactful moments in my career weren’t when I was “designing” in the traditional sense. They have been gaining incredible insights when discussing problems with teammates who have varied experiences, brainstorming, and coming up with ideas that I never could have come up with on my own. As I always say, ten minds in a room will come up with ten times as many ideas as one mind. Often, many ideas are the most useful outcome.</p>
<p>There have been times when a team has helped to reframe a problem in a workshop, taken vague and conflicting feedback, and clarified a path forward, or I’ve sat with a sales rep and heard the same user complaint show up in multiple conversations. This is when <strong>design becomes a team sport</strong>, and when your ability to capture the outcomes multiplies the UX impact.</p>
Why This Article Matters Now
<p>The reason collaboration feels so urgent now is that the way we work since COVID has changed, according to a <a href="https://www.bls.gov/opub/btn/volume-13/remote-work-productivity.htm">study published by the US Department of Labor</a>. Teams are more cross-functional, often remote, and increasingly complex. Silos are easier to fall into, due to distance or lack of face-to-face contact, and yet alignment has never been more important. We can’t afford to see collaboration as a “nice to have” anymore. It’s a <strong>core skill</strong>, especially in UX, where our work touches so many parts of an organisation. </p>
<p>Let’s break down what collaboration in UX really means, and why it deserves way more attention than it gets.</p>
What Is Collaboration In UX, Really?
<p>Let’s start by clearing up a misconception. Collaboration is not the same as cooperation. </p>
<ul>
<li>
<strong>Cooperation</strong>: “You do your thing, I’ll do mine, and we’ll check in later.”</li>
<li>
<strong>Collaboration</strong>: “Let’s figure this out together and co-own the outcome.”</li>
</ul>
<p>Collaboration, as defined in the <a href="https://oercollective.caul.edu.au/communication-concepts/chapter/defining-collaboration/">book Communication Concepts</a>, published by Deakin University, involves <strong>working with others to produce outputs</strong> and/or achieve shared goals. The outcome of collaboration is typically a tangible product or a measurable achievement, such as solving a problem or making a decision. Here’s an example from a recent project: </p>
<p>Recently, I worked on a fraud alert platform for a fintech business. It was a six-month project, and we had zero access to users, as the product had not yet hit the market. Also, the users were highly specialised in the B2B finance space and were difficult to find. Additionally, the team members I needed to collaborate with were based in Malaysia and Melbourne, while I am located in Sydney.</p>
<p>Instead of treating that as a dead end, we turned inward: collaborating with subject matter experts, professional services consultants, compliance specialists, and customer support team members who had deep knowledge of fraud patterns and customer pain points. Through bi-weekly workshops using a Miro board, iterative feedback loops, and sketching sessions, we worked on <strong>design solution options</strong>. I even asked them to present their own design version as part of the process.</p>
<p><img src="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/1-miro-board.png"></p>
<p>After months of iterating on the fraud investigation platform through these collaboration sessions, I ended up with two different design frameworks for the investigator’s dashboard. Instead of just presenting the “best one” and hoping for buy-in, I ran a voting exercise with PMs, engineers, SMEs, and customer support. Everyone had a voice. The winning design was created and validated with the input of the team, resulting in an outcome that solved many problems for the end user and was <strong>owned by the entire team</strong>. That’s collaboration!</p>
<p><img src="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/2-miro-board-design-collaboration-workshops.png"></p>
<p>It is definitely one of the most satisfying projects of my career.</p>
<p>On the other hand, I recently caught up with an old colleague who now serves as a product owner. Her story was a cautionary tale: the design team had gone ahead with a major redesign of an app without looping her in until late in the game. Not surprisingly, the new design missed several key product constraints and business goals. It had to be scrapped and redone, with her now at the table. That experience reinforced what we all know deep down: your best work rarely happens in isolation.</p>
<p>As illustrated in my experience, <strong>true collaboration can span many roles</strong>. It’s not just between designers and PMs. It can also include QA testers who identify real-world issues, content strategists who ensure our language is clear and inclusive, sales representatives who interact with customers on a daily basis, marketers who understand the brand’s voice, and, of course, customer support agents who are often the first to hear when something goes wrong. The best outcomes arrive when we’re open to <strong>different perspectives and inputs</strong>. </p>
Why Collaboration Is So Overlooked?
<p>If collaboration is so powerful, why don’t we talk about it more?</p>
<p>In my experience, one reason is the <a href="https://socialinnovationsjournal.org/editions/75-disruptive-innovations/2908-let-s-bust-the-lone-hero-myth-the-role-of-collective-leadership-in-systems-change#:~:text=It%20requires%20an%20understanding%20of,affected%20by%20the%20targeted%20issue.">myth of the “lone UX hero”</a>. Many of us entered the field inspired by stories of design geniuses revolutionising products on their own. Our portfolios often reflect that as well. We showcase our solo work, our processes, and our wins. Job descriptions often reinforce the idea of the solo UX designer, listing tool proficiency and deliverables more than soft skills and team dynamics.</p>
<p>And then there’s the team culture within many organisations of “just get the work done”, which often leads to fewer meetings and tighter deadlines. As a result, a sense of collaboration is inefficient and wasted. I have also experienced working with some designers where perfectionism and territoriality creep in — “This is my design” — which kills the open, communal spirit that collaboration needs.</p>
When Collaboration Is The User Research
<p>In an ideal world, we’d always have direct access to users. But let’s be real. Sometimes that just doesn’t happen. Whether it’s due to budget constraints, time limitations, or layers of bureaucracy, talking to end users isn’t always possible. That’s where collaboration with team members becomes even more crucial.</p>
<p>The next best thing to talking to users? Talking to the people who talk to users. Sales teams, customer success reps, tech support, and field engineers. They’re all user researchers in disguise!</p>
<p>On another B2C project, the end users were having trouble completing the key task. My role was to redesign the onboarding experience for an online identity capture tool for end users. I was unable to schedule interviews with end users due to budget and time constraints, so I turned to the sales and tech support teams. </p>
<p>I conducted multiple mini-workshops to identify the most common onboarding issues they had heard directly from our customers. This led to a huge “aha” moment: most users dropped off before the document capture process. They may have been struggling with a lack of instruction, not knowing the required time, or not understanding the steps involved in completing the onboarding process. </p>
<p>That insight reframed my approach, and we ultimately redesigned the flow to prioritize orientation and clear instructions before proceeding to the setup steps. Below is an example of one of the screen designs, including some of the instructions we added. </p>
<p><img src="https://files.smashing.media/articles/collaboration-most-underrated-ux-skill/3-screen-design.png"></p>
<p>This kind of collaboration <em>is</em> user research. It’s not a substitute for talking to users directly, but it’s a <strong>powerful proxy</strong> when you have limited options.</p>
But What About Using AI?
<p>Glad you asked! Even AI tools, which are increasingly being used for idea generation, pattern recognition, or rapid prototyping, don’t replace collaboration; they just change the shape of it.</p>
<p>AI can help you explore design patterns, draft user flows, or generate multiple variations of a layout in seconds. It’s fantastic for getting past creative blocks or pressure-testing your assumptions. But let’s be clear: these tools are accelerators, not oracles. As an innovation and strategy consultant <a href="https://www.linkedin.com/pulse/team-collaboration-does-ai-help-hinder-nathan-waterhouse-canse/">Nathan Waterhouse points out</a>, AI can point you in a direction, but it can’t tell you which direction is the <em>right</em> one in your specific context. That still requires human judgment, empathy, and an understanding of the messy realities of users and business goals.</p>
<p>You still need people, especially those closest to your users, to validate, challenge, and evolve any AI-generated idea. For instance, you might use ChatGPT to brainstorm onboarding flows for a SaaS tool, but if you’re not involving customer support reps who regularly hear <em>“I didn’t know where to start”</em> or <em>“I couldn’t even log in,”</em> you’re just working with assumptions. The same applies to engineers who know what is technically feasible or PMs who understand where the business is headed.</p>
<p>AI can generate ideas, but only collaboration turns those ideas into something usable, valuable, and real. Think of it as a powerful ingredient, but not the whole recipe.</p>
How To Strengthen Your UX Collaboration Skills?
<p>If collaboration doesn’t come naturally or hasn’t been a focus, that’s okay. Like any skill, it can be practiced and improved. Here are a few ways to level up:</p>
<ol>
<li>
<strong>Cultivate curiosity about your teammates.</strong><br>Ask engineers what keeps them up at night. Learn what metrics your PMs care about. Understand the types of tickets the support team handles most frequently. The more you care about their challenges, the more they'll care about yours.</li>
<li>
<strong>Get comfortable facilitating.</strong><br>You don’t need to be a certified Design Sprint master, but learning how to run a structured conversation, align stakeholders, or synthesize different points of view is hugely valuable. Even a simple “What’s working? What’s not?” retro can be an amazing starting point in identifying where you need to focus next.</li>
<li>
<strong>Share early, share often.</strong><br>Don’t wait until your designs are polished to get input. Messy sketches and rough prototypes invite collaboration. When others feel like they’ve helped shape the work, they’re more invested in its success.</li>
<li>
<strong>Practice active listening.</strong><br>When someone critiques your work, don’t immediately defend. Pause. Ask follow-up questions. Reframe the feedback. Collaboration isn’t about consensus; it’s about finding a shared direction that can honour multiple truths.</li>
<li>
<strong>Co-own the outcome.</strong><br>Let go of your ego. The best UX work isn’t “your” work. It’s the result of many voices, skill sets, and conversations converging toward a solution that helps users. It’s not “I”, it’s “we” that will solve this problem together. </li>
</ol>
Conclusion: UX Is A Team Sport
<p>Great design doesn’t emerge from a vacuum. It comes from <strong>open dialogue</strong>, <strong>cross-functional understanding</strong>, and a <strong>shared commitment</strong> to solving real problems for real people.</p>
<p>If there’s one thing I wish every early-career designer knew, it’s this:</p>
<p>Collaboration is not a side skill. It’s the engine behind every meaningful design outcome. And for seasoned professionals, it’s the superpower that turns good teams into great ones.</p>
<p>So next time you’re tempted to go heads-down and just “crank out a design,” pause to reflect. Ask who else should be in the room. And invite them in, not just to review your work, but to help create it.</p>
<p>Because in the end, the best UX isn’t just what you make. It’s what you make <em>together</em>.</p>
<h3>Further Reading On SmashingMag</h3>
<ul>
<li>“<a href="https://www.smashingmagazine.com/2024/06/presenting-ux-research-design-stakeholders/">Presenting UX Research And Design To Stakeholders: The Power Of Persuasion</a>,” Victor Yocco</li>
<li>“<a href="https://www.smashingmagazine.com/2024/05/transforming-relationship-between-designers-developers/">Transforming The Relationship Between Designers And Developers</a>,” Chris Day</li>
<li>“<a href="https://www.smashingmagazine.com/2022/10/effective-communication-everyday-meetings/">Effective Communication For Everyday Meetings</a>,” Andrii Zhdan</li>
<li>“<a href="https://www.smashingmagazine.com/2022/04/ux-integrated-design-workflows/">Preventing Bad UX Through Integrated Design Workflows</a>,” Ceara Crawshaw</li>
</ul>
<p>SVG animations take me back to the Hanna-Barbera cartoons I watched as a kid. Shows like <em>Wacky Races</em>, <em>The Perils of Penelope Pitstop</em>, and, of course, <a href="https://en.wikipedia.org/wiki/Yogi_Bear"><em>Yogi Bear</em></a>. They inspired me to lovingly recreate some classic <a href="https://stuffandnonsense.co.uk/toon-titles">Toon Titles</a> using CSS, SVG, and SMIL animations.</p>
<p>But getting animations to load quickly and work smoothly needs more than nostalgia. It takes clean design, lean code, and a process that makes complex SVGs easier to animate. Here’s how I do it.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/1-toon-titles.png"></p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/2-yogi-bear-bewitched-bear.png"></p>
Start Clean And Design With Optimisation In Mind
<p>Keeping things simple is key to making SVGs that are optimised and ready to animate. Tools like Adobe Illustrator convert bitmap images to vectors, but the output often contains too many extraneous groups, layers, and masks. Instead, I start cleaning in Sketch, work from a reference image, and use the Pen tool to create paths.</p>
<blockquote>
<strong>Tip</strong>: <a href="https://affinity.serif.com/en-gb/designer/">Affinity Designer</a> (UK) and <a href="https://www.sketch.com/">Sketch</a> (Netherlands) are alternatives to Adobe Illustrator and Figma. Both are independent and based in Europe. Sketch has been my default design app since Adobe killed Fireworks.</blockquote>
Beginning With Outlines
<p>For these Toon Titles illustrations, I first use the Pen tool to draw black outlines with as few anchor points as possible. The more points a shape has, the bigger a file becomes, so simplifying paths and reducing the number of points makes an SVG much smaller, often with no discernible visual difference.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/3-outlines-anchor-points.png"></p>
<p>Bearing in mind that parts of this Yogi illustration will ultimately be animated, I keep outlines for this Bewitched Bear’s body, head, collar, and tie separate so that I can move them independently. The head might nod, the tie could flap, and, like in those classic cartoons, Yogi’s collar will hide the joins between them.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/4-separate-outlines.png"></p>
Drawing Simple Background Shapes
<p>With the outlines in place, I use the Pen tool again to draw new shapes, which fill the areas with colour. These colours sit behind the outlines, so they don’t need to match them exactly. The fewer anchor points, the smaller the file size.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/5-simple-background-shapes.png"></p>
<p>Sadly, neither Affinity Designer nor Sketch has tools that can simplify paths, but if you have it, using Adobe Illustrator can shave a few extra kilobytes off these background shapes.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/6-adobe-illustrator-simplify-paths.png"></p>
Optimising The Code
<p>It’s not just metadata that makes SVG bulkier. The way you export from your design app also affects file size.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/7-vector-artwork-ready-optimisation.png"></p>
<p>Exporting just those simple background shapes from Adobe Illustrator includes unnecessary groups, masks, and bloated path data by default. Sketch’s code is barely any better, and there’s plenty of room for improvement, even in its SVGO Compressor code. I rely on Jake Archibald’s <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a>, which uses SVGO v3 and consistently delivers the best optimised SVGs.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/8-jake-archibald-svgomg-online-optimisation-tool.png"></p>
Layering SVG Elements
<p>My process for preparing SVGs for animation goes well beyond drawing vectors and optimising paths — it also includes how I <strong>structure the code</strong> itself. When every visual element is crammed into a single SVG file, even optimised code can be a nightmare to navigate. Locating a specific path or group often feels like searching for a needle in a haystack.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/9-yogi-bear-title-card-toon-titles-recreation.png"></p>
<p>That’s why I develop my SVGs in layers, exporting and optimising one set of elements at a time — always in the order they’ll appear in the final file. This lets me build the master SVG gradually by pasting it in each cleaned-up section. For example, I start with backgrounds like this gradient and title graphic.</p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/10-gradient-background-title-graphic.png"></p>
<p>Instead of facing a wall of SVG code, I can now easily identify the background gradient’s path and its associated <code>linearGradient</code>, and see the group containing the title graphic. I take this opportunity to add a comment to the code, which will make editing and adding animations to it easier in the future:</p>
<pre><code><svg ...>
<defs>
<!-- ... -->
</defs>
<path fill="url(#grad)" d="…"/>
<!-- TITLE GRAPHIC -->
<g>
<path … />
<!-- ... -->
</g>
</svg>
</code></pre>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/11-trail-gaussian-blur.png"></p>
<p>Next, I add the blurred trail from Yogi’s airborne broom. This includes defining a Gaussian Blur filter and placing its path between the background and title layers:</p>
<pre><code><svg ...>
<defs>
<linearGradient id="grad" …>…</linearGradient>
<filter id="trail" …>…</filter>
</defs>
<!-- GRADIENT -->
<!-- TRAIL -->
<path filter="url(#trail)" …/>
<!-- TITLE GRAPHIC -->
</svg>
</code></pre>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/12-yogi-bear-magical-stars.png"></p>
<p>Then come the magical stars, added in the same sequential fashion:</p>
<pre><code><svg ...>
<!-- GRADIENT -->
<!-- TRAIL -->
<!-- STARS -->
<!-- TITLE GRAPHIC -->
</svg>
</code></pre>
<p>To keep everything organised and animation-ready, I create an empty group that will hold all the parts of Yogi:</p>
<pre><code><g id="yogi">...</g>
</code></pre>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/13-yogi-bear-component-parts.png"></p>
<p>Then I build Yogi from the ground up — starting with background props, like his broom:</p>
<pre><code><g id="broom">...</g>
</code></pre>
<p>Followed by grouped elements for his body, head, collar, and tie:</p>
<pre><code><g id="yogi">
<g id="broom">…</g>
<g id="body">…</g>
<g id="head">…</g>
<g id="collar">…</g>
<g id="tie">…</g>
</g>
</code></pre>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/14-yogi-bear-title-card-toon-titles-recreation.png"></p>
<p>Since I export each layer from the same-sized artboard, I don’t need to worry about alignment or positioning issues later on — they’ll all slot into place automatically. I keep my code <strong>clean</strong>, <strong>readable</strong>, and <strong>ordered logically</strong> by layering elements this way. It also makes animating smoother, as each component is easier to identify.</p>
Reusing Elements With <code><use></code>
<p>When duplicate shapes get reused repeatedly, SVG files can get bulky fast. My recreation of the “Bewitched Bear” title card contains 80 stars in three sizes. Combining all those shapes into one optimised path would bring the file size down to 3KB. But I want to animate individual stars, which would almost double that to 5KB:</p>
<pre><code><g id="stars">
<path class="star-small" fill="#eae3da" d="..."/>
<path class="star-medium" fill="#eae3da" d="..."/>
<path class="star-large" fill="#eae3da" d="..."/>
<!-- ... -->
</g>
</code></pre>
<p>Moving the stars’ <code>fill</code> attribute values to their parent group reduces the overall weight a little:</p>
<pre><code><g id="stars" fill="#eae3da">
<path class="star-small" d="…"/>
<path class="star-medium" d="…"/>
<path class="star-large" d="…"/>
<!-- ... -->
</g>
</code></pre>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/15-yogi-bear-sparkling-stars.png"></p>
<p>But a more efficient and manageable option is to define each star size as a reusable template:</p>
<div>
<pre><code><defs>
<path id="star-large" fill="#eae3da" fill-rule="evenodd" d="…"/>
<path id="star-medium" fill="#eae3da" fill-rule="evenodd" d="…"/>
<path id="star-small" fill="#eae3da" fill-rule="evenodd" d="…"/>
</defs>
</code></pre>
</div>
<p>With this setup, changing a star’s design only means updating its template once, and every instance updates automatically. Then, I reference each one using <code><use></code> and position them with <code>x</code> and <code>y</code> attributes:</p>
<pre><code><g id="stars">
<!-- Large stars -->
<use href="#star-large" x="1575" y="495"/>
<!-- ... -->
<!-- Medium stars -->
<use href="#star-medium" x="1453" y="696"/>
<!-- ... -->
<!-- Small stars -->
<use href="#star-small" x="1287" y="741"/>
<!-- ... -->
</g>
</code></pre>
<p>This approach makes the SVG easier to manage, lighter to load, and faster to iterate on, especially when working with dozens of repeating elements. Best of all, it keeps the markup clean <strong>without compromising on flexibility or performance</strong>.</p>
Adding Animations
<p>The stars trailing behind Yogi’s stolen broom bring so much personality to the animation. I wanted them to sparkle in a seemingly random pattern against the dark blue background, so I started by defining a keyframe animation that cycles through different <code>opacity</code> levels:</p>
<pre><code>@keyframes sparkle {
0%, 100% { opacity: .1; }
50% { opacity: 1; }
}
</code></pre>
<p>Next, I applied this looping animation to every <code>use</code> element inside my stars group:</p>
<pre><code>#stars use {
animation: sparkle 10s ease-in-out infinite;
}
</code></pre>
<p>The secret to creating a convincing twinkle lies in <strong>variation</strong>. I staggered animation delays and durations across the stars using <code>nth-child</code> selectors, starting with the quickest and most frequent sparkle effects:</p>
<pre><code>/* Fast, frequent */
#stars use:nth-child(n + 1):nth-child(-n + 10) {
animation-delay: .1s;
animation-duration: 2s;
}
</code></pre>
<p>From there, I layered in additional timings to mix things up. Some stars sparkle slowly and dramatically, others more randomly, with a variety of rhythms and pauses:</p>
<pre><code>/* Medium */
#stars use:nth-child(n + 11):nth-child(-n + 20) { ... }
/* Slow, dramatic */
#stars use:nth-child(n + 21):nth-child(-n + 30) { ... }
/* Random */
#stars use:nth-child(3n + 2) { ... }
/* Alternating */
#stars use:nth-child(4n + 1) { ... }
/* Scattered */
#stars use:nth-child(n + 31) { ... }
</code></pre>
<p>By thoughtfully structuring the SVG and reusing elements, I can build complex-looking animations without bloated code, making even a simple effect like changing <code>opacity</code> sparkle. </p>
<p><img src="https://files.smashing.media/articles/smashing-animations-part-4-optimising-svgs/16-subtle-movements-yogi-bear.png"></p>
<p>Then, for added realism, I make Yogi’s head wobble:</p>
<div>
<pre><code>@keyframes headWobble {
0% { transform: rotate(-0.8deg) translateY(-0.5px); }
100% { transform: rotate(0.9deg) translateY(0.3px); }
}
#head {
animation: headWobble 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite alternate;
}
</code></pre>
</div>
<p>His tie waves:</p>
<div>
<pre><code>@keyframes tieWave {
0%, 100% { transform: rotateZ(-4deg) rotateY(15deg) scaleX(0.96); }
33% { transform: rotateZ(5deg) rotateY(-10deg) scaleX(1.05); }
66% { transform: rotateZ(-2deg) rotateY(5deg) scaleX(0.98); }
}
#tie {
transform-style: preserve-3d;
animation: tieWave 10s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}
</code></pre>
</div>
<p>His broom swings:</p>
<div>
<pre><code>@keyframes broomSwing {
0%, 20% { transform: rotate(-5deg); }
30% { transform: rotate(-4deg); }
50%, 70% { transform: rotate(5deg); }
80% { transform: rotate(4deg); }
100% { transform: rotate(-5deg); }
}
#broom {
animation: broomSwing 4s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
}
</code></pre>
</div>
<p>And, finally, Yogi himself gently rotates as he flies on his magical broom:</p>
<div>
<pre><code>@keyframes yogiWobble {
0% { transform: rotate(-2.8deg) translateY(-0.8px) scale(0.998); }
30% { transform: rotate(1.5deg) translateY(0.3px); }
100% { transform: rotate(3.2deg) translateY(1.2px) scale(1.002); }
}
#yogi {
animation: yogiWobble 3.5s cubic-bezier(.37, .14, .3, .86) infinite alternate;
}
</code></pre>
</div>
<p>All these subtle movements bring Yogi to life. By developing structured SVGs, I can create animations that feel full of character without writing a single line of JavaScript.</p>
<p>Try this yourself:</p>
<p>See the Pen <a href="https://codepen.io/smashingmag/pen/bNdwJBN">Bewitched Bear CSS/SVG animation [forked]</a> by <a href="https://codepen.io/malarkey">Andy Clarke</a>.</p>
Conclusion
<p>Whether you’re recreating a classic title card or animating icons for an interface, the principles are the same:</p>
<ol>
<li>Start clean,</li>
<li>Optimise early, and</li>
<li>Structure everything with animation in mind.</li>
</ol>
<p>SVGs offer incredible creative freedom, but only if kept <strong>lean</strong> and <strong>manageable</strong>. When you plan your process like a production cell — layer by layer, element by element — you’ll spend less time untangling code and more time bringing your work to life. </p>
<p>You’ve drawn fifty versions of the same screen — and you still hate every one of them. Begrudgingly, you pick three, show them to your product manager, and hear: <em>“Looks cool, but the idea doesn’t work.”</em> Sound familiar?</p>
<p>In this article, I’ll unpack why designers fall into detail work at the wrong moment, examining both process pitfalls and the underlying psychological reasons, as understanding these traps is the first step to overcoming them. I’ll also share tactics I use to climb out of that trap.</p>
Reason #1 You’re Afraid To Show Rough Work
<p>We designers worship detail. We’re taught that true craft equals razor‑sharp typography, perfect grids, and pixel precision. So the minute a task arrives, we pop open Figma and start polishing long before polish is needed.</p>
<p>I’ve skipped the sketch phase more times than I care to admit. I told myself it would be faster, yet I always ended up spending hours producing a tidy mock‑up when a scribbled thumbnail would have sparked a five‑minute chat with my product manager. Rough sketches felt “unprofessional,” so I hid them.</p>
<p>The cost? Lost time, wasted energy — and, by the third redo, teammates were quietly wondering if I even understood the brief. </p>
<p>The real problem here is the <strong>habit</strong>: we open Figma and start perfecting the UI before we’ve even solved the problem.</p>
<p>So why do we hide these rough sketches? It’s not just a bad habit or plain silly. There are solid <strong>psychological reasons</strong> behind it. We often just call it perfectionism, but it’s deeper than wanting things neat. Digging into the psychology (like the <a href="https://positivepsychology.com/perfectionism/">research by Hewitt and Flett</a>) shows there are a couple of flavors driving this:</p>
<ul>
<li>
<strong>Socially prescribed perfectionism</strong><br>It’s that nagging feeling that everyone else expects perfect work from you, which makes showing anything rough feel like walking into the lion’s den.</li>
<li>
<strong>Self-oriented perfectionism</strong><br>Where you’re the one setting impossibly high standards for yourself, leading to brutal self-criticism if anything looks slightly off.</li>
</ul>
<p>Either way, the result’s the same: showing unfinished work feels wrong, and you miss out on that vital early feedback.</p>
<p>Back to the design side, remember that clients rarely see architects’ first pencil sketches, but these sketches still exist; they guide structural choices before the 3D render. Treat your thumbnails the same way — artifacts meant to collapse uncertainty, not portfolio pieces. Once stakeholders see the upside, roughness becomes a badge of speed, not sloppiness. So, the key is to consciously make that shift:</p>
<blockquote>Treat early sketches as disposable tools for thinking and actively share them to get feedback faster.</blockquote>
<p><img src="https://files.smashing.media/articles/why-designers-get-stuck-in-details/mockup-early.png"></p>
Reason #2: You Fix The Symptom, Not The Cause
<p>Before tackling any task, we need to understand what business outcome we’re aiming for. Product managers might come to us asking to enlarge the payment button in the shopping cart because users aren’t noticing it. The suggested solution itself isn’t necessarily bad, but before redesigning the button, we should ask, <em>“What data suggests they aren’t noticing it?”</em> Don’t get me wrong, I’m not saying you shouldn’t trust your product manager. On the contrary, these questions help ensure you’re on the same page and working with the same data.</p>
<p>From my experience, here are several reasons why users might not be clicking that coveted button:</p>
<ul>
<li>Users don’t understand that this step is for payment.</li>
<li>They understand it’s about payment but expect order confirmation first.</li>
<li>Due to incorrect translation, users don’t understand what the button means.</li>
<li>Lack of trust signals (no security icons, unclear seller information).</li>
<li>Unexpected additional costs (hidden fees, shipping) that appear at this stage.</li>
<li>Technical issues (inactive button, page freezing).</li>
</ul>
<p>Now, imagine you simply did what the manager suggested. Would you have solved the problem? Hardly. </p>
<p>Moreover, the responsibility for the unresolved issue would fall on you, as the interface solution lies within the design domain. The product manager actually did their job correctly by identifying a problem: suspiciously, few users are clicking the button.</p>
<p>Psychologically, taking on this bigger role isn’t easy. It means overcoming the <a href="https://positivepsychology.com/fear-of-failure/">fear of making mistakes</a> and the discomfort of exploring unclear problems rather than just doing tasks. This shift means seeing ourselves as <strong>partners who create value</strong> — even if it means fighting a hesitation to question product managers (which might come from a fear of speaking up or a desire to <a href="https://ideasforleaders.com/Ideas/overcoming-our-evolutionary-fears-to-speak-up-to-authority/">avoid challenging authority</a>) — and understanding that using our <strong>product logic expertise</strong> proactively is crucial for modern designers.</p>
<p>There’s another critical reason why we, designers, need to be a bit like product managers: the rise of AI. I deliberately used a simple example about enlarging a button, but I’m confident that in the near future, AI will easily handle routine design tasks. This worries me, but at the same time, I’m already gladly stepping into the product manager’s territory: understanding product and business metrics, formulating hypotheses, conducting research, and so on. It might sound like I’m taking work away from PMs, but believe me, they undoubtedly have enough on their plates and are usually more than happy to delegate some responsibilities to designers.</p>
Reason #3: You’re Solving The Wrong Problem
<p>Before solving anything, ask whether the problem even deserves your attention.</p>
<p>During a major home‑screen redesign, our goal was to drive more users into paid services. The initial hypothesis — making service buttons bigger and brighter might help returning users — seemed reasonable enough to test. However, even when A/B tests (a method of comparing two versions of a design to determine which performs better) showed minimal impact, we continued to tweak those buttons.</p>
<p>Only later did it click: the home screen isn’t the place to sell; visitors open the app to start, not to buy. We removed that promo block, and nothing broke. Contextual entry points deeper into the journey performed brilliantly. Lesson learned:</p>
<blockquote>Without the right context, any visual tweak is lipstick on a pig.</blockquote>
<p>Why did we get stuck polishing buttons instead of stopping sooner? It’s easy to get tunnel vision. Psychologically, it’s likely the good old <a href="https://en.wikipedia.org/wiki/Sunk_cost#Loss_aversion_and_the_sunk_cost_fallacy">sunk cost fallacy</a> kicking in: we’d already invested time in the buttons, so stopping felt like wasting that effort, even though the data wasn’t promising.</p>
<p>It’s just easier to keep fiddling with something familiar than to admit we need a new plan. Perhaps the simple question I should have asked myself <em>when results stalled</em> was: <em>“Are we optimizing the right thing or just polishing something that fundamentally doesn’t fit the user’s primary goal here?”</em> That alone might have saved hours.</p>
Reason #4: You’re Drowning In Unactionable Feedback
<p>We all discuss our work with colleagues. But here’s a crucial point: what kind of question do you pose to kick off that discussion? If your go-to is “What do you think?” well, that question might lead you down a rabbit hole of personal opinions rather than actionable insights. While experienced colleagues will cut through the noise, others, unsure what to evaluate, might comment on anything and everything — fonts, button colors, even when you desperately need to discuss a user flow.</p>
<p>What matters here are two things:</p>
<ol>
<li>The <strong>question</strong> you ask,</li>
<li>The <strong>context</strong> you give.</li>
</ol>
<p>That means clearly stating the problem, what you’ve learned, and how your idea aims to fix it.</p>
<p>For instance:</p>
<blockquote>“The problem is our payment conversion rate has dropped by X%. I’ve interviewed users and found they abandon payment because they don’t understand how the total amount is calculated. My solution is to show a detailed cost breakdown. Do you think this actually solves the problem for them?”</blockquote>
<p>Here, you’ve stated the problem (conversion drop), shared your insight (user confusion), explained your solution (cost breakdown), and asked a direct question. It’s even better if you prepare a list of specific sub-questions. For instance: “Are all items in the cost breakdown clear?” or “Does the placement of this breakdown feel intuitive within the payment flow?”</p>
<p>Another good habit is to keep your rough sketches and previous iterations handy. Some of your colleagues’ suggestions might be things you’ve already tried. It’s great if you can discuss them immediately to either revisit those ideas or definitively set them aside.</p>
<p>I’m not a psychologist, but experience tells me that, psychologically, the reluctance to be this specific often stems from a fear of our solution being rejected. We tend to internalize feedback: a seemingly innocent comment like, <em>“Have you considered other ways to organize this section?”</em> or <em>“Perhaps explore a different structure for this part?”</em> can instantly morph in our minds into <em>“You completely messed up the structure. You’re a bad designer.”</em> <a href="https://www.psychologytoday.com/us/basics/imposter-syndrome">Imposter syndrome</a>, in all its glory.</p>
<p>So, to wrap up this point, here are two recommendations:</p>
<ol>
<li>
<strong>Prepare for every design discussion.</strong><br>A couple of focused questions will yield far more valuable input than a vague <em>“So, what do you think?”</em>.</li>
<li>
<strong>Actively work on separating feedback on your design from your self-worth.</strong><br>If a mistake is pointed out, acknowledge it, learn from it, and you’ll be less likely to repeat it. This is often easier said than done. For me, it took years of working with a psychotherapist. If you struggle with this, I sincerely wish you strength in overcoming it.</li>
</ol>
Reason #5 You’re Just Tired
<p>Sometimes, the issue isn’t strategic at all — it’s fatigue. Fussing over icon corners can feel like a cozy bunker when your brain is fried. There’s a name for this: <strong>decision fatigue</strong>. Basically, your brain’s battery for hard thinking is low, so it hides out in the easy, comfy zone of pixel-pushing. </p>
<p>A striking example comes from a New York Times article titled “<a href="https://www.nytimes.com/2011/08/21/magazine/do-you-suffer-from-decision-fatigue.html">Do You Suffer From Decision Fatigue?</a>.” It described how judges deciding on release requests were far more likely to grant release early in the day (about 70% of cases) compared to late in the day (less than 10%) simply because their decision-making energy was depleted. Luckily, designers rarely hold someone’s freedom in their hands, but the example dramatically shows how fatigue can impact our judgment and productivity.</p>
<p><strong>What helps here:</strong></p>
<ul>
<li>
<strong>Swap tasks.</strong><br>Trade tickets with another designer; novelty resets your focus.</li>
<li>
<strong>Talk to another designer.</strong><br>If NDA permits, ask peers outside the team for a sanity check.</li>
<li>
<strong>Step away.</strong><br>Even a ten‑minute walk can do more than a double‑shot espresso.</li>
</ul>
<p>By the way, I came up with these ideas while walking around my office. I was lucky to work near a river, and those short walks quickly turned into a helpful habit.</p>
<p><img src="https://files.smashing.media/articles/why-designers-get-stuck-in-details/river-break.png"></p>
<p>And one more trick that helps me snap out of detail mode early: if I catch myself making around 20 little tweaks — changing font weight, color, border radius — I just stop. Over time, it turned into a habit. I have a similar one with Instagram: by the third reel, my brain quietly asks, <em>“Wait, weren’t we working?”</em> Funny how that kind of nudge saves a ton of time.</p>
Four Steps I Use to Avoid Drowning In Detail
<p>Knowing these potential traps, here’s the practical process I use to stay on track:</p>
<h3>1. Define the Core Problem & Business Goal</h3>
<p>Before anything, dig deep: what’s the actual problem we’re solving, not just the requested task or a surface-level symptom? Ask ‘why’ repeatedly. What user pain or business need are we addressing? Then, state the clear business goal: <em>“What metric am I moving, and do we have data to prove this is the right lever?”</em> If retention is the goal, decide whether push reminders, gamification, or personalised content is the best route. The wrong lever, or tackling a symptom instead of the cause, dooms everything downstream.</p>
<h3>2. Choose the Mechanic (Solution Principle)</h3>
<p>Once the core problem and goal are clear, lock the solution principle or ‘mechanic’ first. Going with a game layer? Decide if it’s leaderboards, streaks, or badges. Write it down. Then move on. No UI yet. This keeps the focus high-level before diving into pixels.</p>
<h3>3. Wireframe the Flow & Get Focused Feedback</h3>
<p>Now open Figma. Map screens, layout, and transitions. Boxes and arrows are enough. Keep the fidelity low so the discussion stays on the flow, not colour. Crucially, when you share these early wires, ask specific questions and provide clear context (as discussed in ‘Reason #4’) to get actionable feedback, not just vague opinions.</p>
<h3>4. Polish the Visuals (Mindfully)</h3>
<p>I only let myself tweak grids, type scales, and shadows after the flow is validated. If progress stalls, or before a major polish effort, I surface the work in a design critique — again using targeted questions and clear context — instead of hiding in version 47. This ensures detailing serves the now-validated solution.</p>
<p>Even for something as small as a single button, running these four checkpoints takes about ten minutes and saves hours of decorative dithering.</p>
Wrapping Up
<p>Next time you feel the pull to vanish into mock‑ups before the problem is nailed down, <strong>pause and ask what you might be avoiding</strong>. Yes, that can expose an uncomfortable truth. But pausing to ask what you might be avoiding — maybe the fuzzy core problem, or just asking for tough feedback — gives you the power to face the real issue head-on. It keeps the project focused on solving the right problem, not just perfecting a flawed solution.</p>
<p>Attention to detail is a superpower when used at the right moment. Obsessing over pixels too soon, though, is a bad habit and a warning light telling us the process needs a rethink.</p>
<p>This article is a sponsored by <a href="https://tetralogical.com/">TetraLogical</a></p>
<p>Neurodivergent needs are often considered as an edge case that doesn’t fit into common user journeys or flows. Neurodiversity tends to get overlooked in the design process. Or it is tackled late in the process, and only if there is enough time.</p>
<p>But <strong>people aren’t edge cases</strong>. Every person is just a different person, performing tasks and navigating the web in a different way. So how can we design better, <strong>more inclusive experiences</strong> that cater to different needs and, ultimately, benefit everyone? Let’s take a closer look.</p>
<p><img src="https://files.smashing.media/articles/designing-for-neurodiversity/1-neurodiversity-practical-guides.jpeg"></p>
Neurodiversity Or Neurodivergent?
<p>There is quite a bit of confusion about both terms on the web. Different people think and experience the world differently, and <strong>neurodiversity</strong> sees differences as natural variations, not deficits. It distinguishes between <strong>neurotypical</strong> and <strong>neurodivergent</strong> people.</p>
<ul>
<li>
<strong>Neurotypical</strong> people see the world in a “typical” and widely perceived as expected way.</li>
<li>
<strong>Neurodivergent</strong> people experience the world differently, for example, people with ADHD, dyslexia, dyscalculia, synesthesia, and hyperlexia.</li>
</ul>
<p>According to various sources, around <strong>15–40% of the population</strong> has neurodivergent traits. These traits can be innate (e.g., autism) or acquired (e.g., trauma). But they are always on a spectrum, and vary a lot. A person with <strong>autism is not neurodiverse</strong> — they are neurodivergent.</p>
<p>One of the main strengths of neurodivergent people is how <strong>imaginative and creative</strong> they are, coming up with out-of-the-box ideas quickly. With exceptional levels of attention, strong long-term memory, a unique perspective, unbeatable accuracy, and a strong sense of justice and fairness.</p>
<p>Being different in a world that, to some degree, still doesn’t accept these differences is exhausting. So unsurprisingly, neurodivergent people often bring along determination, resilience, and <strong>high levels of empathy</strong>.</p>
Design With People, Not For Them
<p>As a designer, I often see myself as a <strong>path-maker</strong>. I’m designing reliable paths for people to navigate to their goals comfortably. Without being blocked. Or confused. Or locked out.</p>
<p>That means respecting the simple fact that people’s needs, tasks, and user journeys are all different, and that they evolve over time. And: most importantly, it means considering them very <strong>early in the process</strong>.</p>
<p>Better accessibility is better for everyone. Instead of making decisions that need to be reverted or refined to be compliant, we can bring a <strong>diverse group of people</strong> — with accessibility needs, with neurodiversity, frequent and infrequent users, experts, newcomers — in the process, and design with them, rather than for them.</p>
Neurodiversity & Inclusive Design Resources
<p>A wonderful resource that helps us design for cognitive accessibility is Stéphanie Walter’s <a href="https://stephaniewalter.design/blog/neurodiversity-and-ux-essential-resources-for-cognitive-accessibility/"><strong>Neurodiversity and UX toolkit</strong></a>. It includes <strong>practical guidelines</strong>, tools, and resources to better understand and design for dyslexia, dyscalculia, autism, and ADHD.</p>
<p><img src="https://files.smashing.media/articles/designing-for-neurodiversity/2-neurodiversity-and-ux-essential-resources-for-cognitive-accessibility.png"></p>
<p>Another fantastic resource is Will Soward’s <a href="https://neurodiversity.design/"><strong>Neurodiversity Design System</strong></a>. It combines neurodiversity and user experience design into a set of design standards and principles that you can use to design accessible learning interfaces.</p>
<p>Last but not least, I’ve been putting together a few summaries about <strong>neurodiversity and inclusive design</strong> over the last few years, so you might find them helpful, too:</p>
<ul>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-accessibility-activity-7188133636985028608-JEtj/">ADHD</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7099294629887397888-L1d0/">Autism</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7156651715486732288-RvW7/">Children</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7087333591906430976-PHsN">Colorblindness</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-accessibility-activity-7178702360649547778-4JtQ">Deafness</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7111249864855810048-5qup">Dyscalculia</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7079355423534784512-3R4C">Dyslexia</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-typography-activity-7095664890727526400-ECAH">Legibility</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7132292750355378176-ZMkL">Left-Handed Users</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-designpatterns-activity-7088778491109720064-im2_">Mental Health</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-learning-activity-7105272692919914496-Q2-y/">Motivation</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-accessibility-activity-7089866429016989696-JRAq">Older Adults</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_how-screen-readers-work-and-how-activity-7130472748371341312-i0PW">Screen Readers</a></li>
<li><a href="https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7160904166075232256-mNMc">Teenagers</a></li>
</ul>
<p>A huge thank-you to everyone who has been writing, speaking, and sharing articles, resources, and toolkits on designing for diversity. The topic is often forgotten and overlooked, but it has an incredible impact. 👏🏼👏🏽👏🏾</p>
<p>There’s an artist in everyone. Some <strong>bring their ideas to life</strong> with digital tools, others capture the perfect moment with a camera or love to grab pen and paper to create little doodles or pieces of lettering. And even if you think you’re far from being an artist, well, why not explore it? It might just be hidden somewhere deep inside of you.</p>
<p>For more than 14 years already our <a href="https://www.smashingmagazine.com/category/wallpapers">monthly wallpapers series</a> has been the perfect opportunity to do just that: to break out of your daily routine and get <strong>fully immersed in a creative little project</strong>. This month is no exception, of course.</p>
<p>For this post, artists and designers from across the globe once again put their creative skills to the test and designed beautiful, unique, and <strong>inspiring desktop wallpapers</strong> to accompany you through the new month. You’ll find their artworks compiled below, along with a selection of June favorites from our wallpapers archives that are just too good to be forgotten. A huge thank-you to everyone who shared their designs with us this time around — you’re <em>smashing</em>!</p>
<p>If you, too, would like to <strong>get featured</strong> in one of our next wallpapers posts, please don’t hesitate to <a href="https://www.smashingmagazine.com/2015/12/desktop-wallpaper-calendars-join-in/">submit your design</a>. We can’t wait to see what you’ll come up with!</p>
<ul>
<li>You can <strong>click on every image to see a larger preview</strong>.</li>
<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>
</ul>
<p></p>June Is For Nature<p></p>
<p></p>
<p>“In this illustration, Earth is planting a little tree — taking care, smiling, doing its part. It’s a reminder that even small acts make a difference. Since World Environment Day falls in June, there’s no better time to give back to the planet.” — Designed by <a href="https://www.gingeritsolutions.com/">Ginger IT Solutions</a> from Serbia.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/june-25-june-is-for-nature-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-june-is-for-nature-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/june-25-june-is-for-nature-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1280x1020.png">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/cal/june-25-june-is-for-nature-cal-2560x1440.png">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1280x1020.png">1280x1020</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/june-is-for-nature/nocal/june-25-june-is-for-nature-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Tastes Of June<p></p>
<p></p>
<p>“A vibrant June wallpaper featuring strawberries and fresh oranges, capturing the essence of early summer with bright colors and seasonal charm.” — Designed by <a href="https://www.librafire.com/">Libra Fire</a> from Serbia.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/june-25-tastes-of-june-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-tastes-of-june-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/june-25-tastes-of-june-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/cal/june-25-tastes-of-june-cal-2560x1440.png">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/tastes-of-june/nocal/june-25-tastes-of-june-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>A Bibliophile’s Shelf<p></p>
<p></p>
<p>“Some of my favorite things to do are reading and listening to music. I know that there are a lot of people that also enjoy these hobbies, so I thought it would be a perfect thing to represent in my wallpaper.” — Designed by <a href="https://mu-art.org/ceceliaotis/">Cecelia Otis</a> from the United States.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/june-25-a-bibliophiles-shelf-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-a-bibliophiles-shelf-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/june-25-a-bibliophiles-shelf-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/cal/june-25-a-bibliophiles-shelf-cal-2560x1440.png">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/a-bibliophiles-shelf/nocal/june-25-a-bibliophiles-shelf-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Solana<p></p>
<p></p>
<p>“Spanish origin, meaning ‘sunshine’.” — Designed by <a href="https://www.designstudiouiux.com/">Bhabna Basak</a> from India.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/june-25-solana-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-solana-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/june-25-solana-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/cal/june-25-solana-cal-2560x1440.jpg">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/solana/nocal/june-25-solana-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Here Comes The Sun<p></p>
<p></p>
<p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/june-25-here-comes-the-sun-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-here-comes-the-sun-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/june-25-here-comes-the-sun-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/cal/june-25-here-comes-the-sun-cal-3840x2160.png">3840x2160</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/here-comes-the-sun/nocal/june-25-here-comes-the-sun-nocal-3840x2160.png">3840x2160</a>
</li>
</ul>
<p></p>Nature’s Melody<p></p>
<p></p>
<p>“With eyes closed and music on, she blends into the rhythm of the earth, where every note breathes nature.” — Designed by <a href="https://www.designstudiouiux.com/">Design Studio</a> from India.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/june-25-natures-melody-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-natures-melody-preview.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/june-25-natures-melody-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/cal/june-25-natures-melody-cal-2560x1440.jpg">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/natures-melody/nocal/june-25-natures-melody-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Silent Glimmer<p></p>
<p></p>
<p>“In the hush of shadows, a single amber eye pierces the dark — silent, watchful, eternal.” — Designed by <a href="https://dribbble.com/KasturipalmaL2">Kasturi Palmal</a> from India.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/june-25-silent-glimmer-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-silent-glimmer-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/june-25-silent-glimmer-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/cal/june-25-silent-glimmer-cal-2560x1440.jpg">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silent-glimmer/nocal/june-25-silent-glimmer-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Ice Cream<p></p>
<p></p>
<p>“To me, ice cream is one of the most iconic symbols of summer. So, what better way to represent the first month of summer than through an iconic summer snack.” — Designed by <a href="https://mu-art.org/daniellemay/">Danielle May</a> from Pennsylvania, United States.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/june-25-ice-cream-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-ice-cream-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/june-25-ice-cream-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/cal/june-25-ice-cream-cal-2560x1440.png">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/ice-cream/nocal/june-25-ice-cream-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Silly Cats<p></p>
<p></p>
<p>“I really loved the fun content aware effect and wanted to play around with it for this wallpaper with some cute cats.” — Designed by <a href="https://wherecreativityworks.com/bloggers/italia/">Italia Storey</a> from the United States.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/june-25-silly-cats-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-silly-cats-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/june-25-silly-cats-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/cal/june-25-silly-cats-cal-2560x1440.png">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/silly-cats/nocal/june-25-silly-cats-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>In Case Of Nothing To Do<p></p>
<p></p>
<p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/june-25-in-case-of-nothing-to-do-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-in-case-of-nothing-to-do-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/june-25-in-case-of-nothing-to-do-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/cal/june-25-in-case-of-nothing-to-do-cal-3840x2160.png">3840x2160</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/in-case-of-nothing-to-do/nocal/june-25-in-case-of-nothing-to-do-nocal-3840x2160.png">3840x2160</a>
</li>
</ul>
<p></p>Pink Hours<p></p>
<p></p>
<p>“With long-lasting days, it is pleasant to spend hours walking at dusk. This photo was taken in an illuminated garden.” — Designed by <a href="https://www.philippebrouard.fr/">Philippe Brouard</a> from France.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/june-25-pink-hours-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-pink-hours-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/june-25-pink-hours-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/cal/june-25-pink-hours-cal-2880x1800.jpg">2880x1800</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-2560x1600.jpg">2560x1600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/pink-hours/nocal/june-25-pink-hours-nocal-2880x1800.jpg">2880x1800</a>
</li>
</ul>
<p></p>What’s The Best That Could Happen?<p></p>
<p></p>
<p>Designed by <a href="https://gracecdphotography.mypixieset.com/">Grace DiNella</a> from Doylestown, PA, United States.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/june-25-whats-the-best-that-could-happen-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-whats-the-best-that-could-happen-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/june-25-whats-the-best-that-could-happen-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1400x900.png">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/cal/june-25-whats-the-best-that-could-happen-cal-2560x1440.png">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1400x900.png">1400x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/whats-the-best-that-could-happen/nocal/june-25-whats-the-best-that-could-happen-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Purrsuit<p></p>
<p></p>
<p>“Recently I have been indulging in fishing as a means of a hobby, and the combined peace and thrill of the activity inspires me. I also love cats, so I thought combining the two subjects would make a stellar wallpaper, especially considering that these two topics already fall hand in hand with each other!” — Designed by <a href="https://mu-art.org/liliannadamian/">Lilianna Damian</a> from Scranton, PA, United States.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/june-25-purrsuit-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-purrsuit-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/june-25-purrsuit-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/cal/june-25-purrsuit-cal-2560x1440.png">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/purrsuit/nocal/june-25-purrsuit-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Happy Best Friends Day!<p></p>
<p></p>
<p>“Today’s all about celebrating the ones who laugh with us, cry with us, and always have our backs — our best friends. Whether it’s been years or just a few months, every moment with them means something special. Tag your ride-or-die, your soul sibling, your partner in crime - and let them know just how much they mean to you.” — Designed by <a href="https://www.popwebdesign.net/">PopArt Studio</a> from Serbia.</p>
<p></p>
<p></p>
<a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/june-25-happy-best-friends-day-full.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-25-happy-best-friends-day-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/june-25-happy-best-friends-day-preview.png">preview</a></li>
<li>with calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/cal/june-25-happy-best-friends-day-cal-2560x1440.png">2560x1440</a>
</li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-320x480.png">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-25/happy-best-friends-day/nocal/june-25-happy-best-friends-day-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Travel Time<p></p>
<p></p>
<p>“June is our favorite time of the year because the keenly anticipated sunny weather inspires us to travel. Stuck at the airport, waiting for our flight but still excited about wayfaring, we often start dreaming about the new places we are going to visit. Where will you travel to this summer? Wherever you go, we wish you a pleasant journey!” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/1fa14b29-e470-4b7d-b73d-1dd94d32bdf8/june-18-travel-time-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d57d2cfe-3f0d-48ac-9c26-df7e43cbd76b/june-18-travel-time-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/d57d2cfe-3f0d-48ac-9c26-df7e43cbd76b/june-18-travel-time-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/travel-time/nocal/june-18-travel-time-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Summer Coziness<p></p>
<p></p>
<p>“I’ve waited for this summer more than I waited for any other summer since I was a kid. I dream of watermelon, strawberries, and lots of colors.” — Designed by <a href="https://cozystream.com/">Kate Jameson</a> from the United States.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/aa7facf5-395f-44a4-a0da-05a2b1a5bd23/june-20-summer-coziness-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/374464b5-093e-4ca2-9397-6f26c83756d4/june-20-summer-coziness-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/summer-coziness/nocal/june-20-summer-coziness-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Deep Dive<p></p>
<p></p>
<p>“Summer rains, sunny days, and a whole month to enjoy. Dive deep inside your passions and let them guide you.” — Designed by <a href="https://www.creitive.com/">Ana Masnikosa</a> from Belgrade, Serbia.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/fc6e8288-e0fc-4db9-8193-a75d34cf964b/june-17-deep-dive-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/565f3237-80f3-46a3-b86a-2c62b5be1213/june-17-deep-dive-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/565f3237-80f3-46a3-b86a-2c62b5be1213/june-17-deep-dive-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/deep-dive/nocal/june-17-deep-dive-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>All-Seeing Eye<p></p>
<p></p>
<p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p>
<p></p>
<p></p>
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-all-seeing-eye-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/all-seeing-eye/nocal/june-24-all-seeing-eye-nocal-3840x2160.png">3840x2160</a>
</li>
</ul>
<p></p>Join The Wave<p></p>
<p></p>
<p>“The month of warmth and nice weather is finally here. We found inspiration in the World Oceans Day which occurs on June 8th and celebrates the wave of change worldwide. Join the wave and dive in!” — Designed by <a href="https://www.popwebdesign.net/index_eng.html">PopArt Studio</a> from Serbia.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8fa3266b-d36c-49dc-9ff2-324f6087cb0d/june-16-join-the-wave-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9405f1a1-e310-4f41-8033-da3d60ad53ac/june-16-join-the-wave-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9405f1a1-e310-4f41-8033-da3d60ad53ac/june-16-join-the-wave-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/join-the-wave/nocal/june-16-join-the-wave-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Create Your Own Path<p></p>
<p></p>
<p>“Nice weather has arrived! Clean the dust off your bike and explore your hometown from a different angle! Invite a friend or loved one and share the joy of cycling. Whether you decide to go for a city ride or a ride in nature, the time spent on a bicycle will make you feel free and happy. So don’t wait, take your bike and call your loved one because happiness is greater only when it is shared. Happy World Bike Day!” — Designed by <a href="https://www.popwebdesign.net/ux-design.html">PopArt Studio</a> from Serbia.</p>
<p></p>
<p></p>
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-22-create-your-own-path-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-320x480.jpg">320x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-640x480.jpg">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-800x480.jpg">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-800x600.jpg">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1024x768.jpg">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1152x864.jpg">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x720.jpg">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x800.jpg">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x960.jpg">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1366x768.jpg">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1440x900.jpg">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-22/create-your-own-path/nocal/june-22-create-your-own-path-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Oh, The Places You Will Go!<p></p>
<p></p>
<p>“In celebration of high school and college graduates ready to make their way in the world!” — Designed by <a href="https://bloeschcreative.etsy.com/">Bri Loesch</a> from the United States.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/46f6cae6-a2aa-468c-ba2f-ecf40e375055/june-14-oh-the-places-you-will-go-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f1235cf-2e90-4379-9126-fb1afcc0338c/june-14-oh-the-places-you-will-go-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/5f1235cf-2e90-4379-9126-fb1afcc0338c/june-14-oh-the-places-you-will-go-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/oh-the-places-you-will-go/nocal/june-14-oh-the-places-you-will-go-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Merry-Go-Round<p></p>
<p></p>
<p>Designed by <a href="https://www.behance.com/xenialatii">Xenia Latii</a> from Germany.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6ad15efe-32d0-4a13-9f98-0fbc19ad0e30/june-17-merry-go-round-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3567d518-b622-410d-86d3-9f844cba1cad/june-17-merry-go-round-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/3567d518-b622-410d-86d3-9f844cba1cad/june-17-merry-go-round-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-320x480.jpg">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/merry-go-round/nocal/june-17-merry-go-round-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Summer Surf<p></p>
<p></p>
<p>“Summer vibes…” — Designed by <a href="https://www.facebook.com/Hirs-Design-148950788515251/?timeline_context_item_type=intro_card_work&timeline_context_item_source=100002085435433">Antun Hirsman</a> from Croatia.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/718103fa-7136-4f8c-a4d7-9cd1d2866c88/june-18-summer-surf-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50f03ba5-c76f-497a-8948-934b504c0a9e/june-18-summer-surf-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/50f03ba5-c76f-497a-8948-934b504c0a9e/june-18-summer-surf-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-18/summer-surf/nocal/june-18-summer-surf-nocal-2650x1440.jpg">2650x1440</a>
</li>
</ul>
<p></p>Expand Your Horizons<p></p>
<p></p>
<p>“It’s summer! Go out, explore, expand your horizons!” — Designed by <a href="https://dorvandavoudi.com/">Dorvan Davoudi</a> from Canada.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/03f98df0-bf1a-43b1-8058-a4ca522ab709/june-16-expand-your-horizons-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb46c0af-2c1f-49ab-94f0-79dcd7d32668/june-16-expand-your-horizons-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bb46c0af-2c1f-49ab-94f0-79dcd7d32668/june-16-expand-your-horizons-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-800x480.jpg">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/expand-your-horizons/nocal/june-16-expand-your-horizons-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Gravity<p></p>
<p></p>
<p>Designed by <a href="https://www.doud.be/">Elise Vanoorbeek</a> from Belgium.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/35d4d25a-1e3c-4651-ad45-40b1aef31618/june-15-gravity-full.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c087db08-a5f6-414f-a827-e2be4acb421d/june-15-gravity-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/c087db08-a5f6-414f-a827-e2be4acb421d/june-15-gravity-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1024x1024.jpg">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1152x864.jpg">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1400x1050.jpg">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-15/gravity/nocal/june-15-gravity-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Yoga Is A Light, Which Once Lit, Will Never Dim<p></p>
<p></p>
<p>“You cannot always control what goes on outside. You can always control what goes on inside. Breathe free, live and let your body feel the vibrations and positiveness that you possess inside you. Yoga can rejuvenate and refresh you and ensure that you are on the journey from self to the self. Happy International Yoga Day!” — Designed by <a href="https://acodez.in/">Acodez IT Solutions</a> from India.</p>
<p></p>
<p></p>
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-17-yoga-is-a-light-which-once-lit-will-never-dim-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-17-yoga-is-a-light-which-once-lit-will-never-dim-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-17-yoga-is-a-light-which-once-lit-will-never-dim-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/yoga-is-a-light-which-once-lit-will-never-dim/nocal/june-17-yoga-is-a-light-which-once-lit-will-never-dim-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Evolution<p></p>
<p></p>
<p>“We’ve all grown to know the month of June through different life stages. From toddlers to adults with children, we’ve enjoyed the weather with rides on our bikes. As we evolve, so do our wheels!” — Designed by Jason Keist from the United States.</p>
<p></p>
<p></p>
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-14-evolution-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-14-evolution-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2023/june-14-evolution-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-768x1024.png">768x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/evolution/nocal/june-14-evolution-nocal-2560x1440.png">2560x1440</a>
</li>
</ul>
<p></p>Summer Party<p></p>
<p></p>
<p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/6d0cb175-acd5-400c-b34d-9ffb094261ab/june-21-summer-party-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db056d09-00a6-4aef-b237-64f081d6aec2/june-21-summer-party-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/db056d09-00a6-4aef-b237-64f081d6aec2/june-21-summer-party-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/summer-party/nocal/june-21-summer-party-nocal-3840x2160.png">3840x2160</a>
</li>
</ul>
<p></p>Splash<p></p>
<p></p>
<p>Designed by <a href="https://www.ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p>
<p></p>
<p></p>
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-splash-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-splash-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-24-splash-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-640x480.png">640x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-800x480.png">800x480</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-800x600.png">800x600</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1024x768.png">1024x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1024x1024.png">1024x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1152x864.png">1152x864</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1280x720.png">1280x720</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1280x800.png">1280x800</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1280x960.png">1280x960</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1280x1024.png">1280x1024</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1366x768.png">1366x768</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1400x1050.png">1400x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1440x900.png">1440x900</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1600x1200.png">1600x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1680x1050.png">1680x1050</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1680x1200.png">1680x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1920x1080.png">1920x1080</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1920x1200.png">1920x1200</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-1920x1440.png">1920x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-2560x1440.png">2560x1440</a>, <a href="https://www.smashingmagazine.com/files/wallpapers/june-24/splash/nocal/june-24-splash-nocal-3840x2160.png">3840x2160</a>
</li>
</ul>
<p></p>Reef Days<p></p>
<p></p>
<p>“June brings the start of summer full of bright colors, happy memories, and traveling. What better way to portray the goodness of summer than through an ocean folk art themed wallpaper. This statement wallpaper gives me feelings of summer and I hope to share that same feeling with others.” — Designed by Taylor Davidson from Kentucky.</p>
<p></p>
<p></p>
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-21-reef-days-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-480x800.png">480x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1242x2208.png">1242x2208</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-21/reef-days/nocal/june-21-reef-days-nocal-1280x1024.png">1280x1024</a>
</li>
</ul>
<p></p>Solstice Sunset<p></p>
<p></p>
<p>“June 21 marks the longest day of the year for the Northern Hemisphere — and sunsets like these will be getting earlier and earlier after that!” — Designed by <a href="https://www.behance.net/jamesmitchell23">James Mitchell</a> from the United Kingdom.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/492124f6-1b46-441b-a52b-2bbcf4372536/june-17-solstice-sunset-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c0f6baa-5eda-4741-aa4c-bb92a50c16cb/june-17-solstice-sunset-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/2c0f6baa-5eda-4741-aa4c-bb92a50c16cb/june-17-solstice-sunset-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/solstice-sunset/nocal/june-17-solstice-sunset-nocal-2880x1800.png">2880x1800</a>
</li>
</ul>
<p></p>Wildlife Revival<p></p>
<p></p>
<p>“This planet is the home that we share with all other forms of life and it is our obligation and sacred duty to protect it.” — Designed by <a href="https://www.librafire.com/">LibraFire</a> from Serbia.</p>
<p></p>
<p></p>
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-20-wildlife-revival-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-20-wildlife-revival-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/june-20-wildlife-revival-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-640x480.png">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-800x480.png">800x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-800x600.png">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1152x864.png">1152x864</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1280x720.png">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-20/wildlife-revival/nocal/june-20-wildlife-revival-nocal-2560x1440.png">2560x1440</a> </li>
</ul>
<p></p>Pineapple Summer Pop<p></p>
<p></p>
<p>“I love creating fun and feminine illustrations and designs. I was inspired by juicy tropical pineapples to celebrate the start of summer.” — Designed by Brooke Glaser from Honolulu, Hawaii.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e2d050c6-791c-4043-af11-3624e87054fe/june-16-pineapple-summer-pop-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/16db22ee-c7f8-47a3-856c-992c82cd61f9/june-16-pineapple-summer-pop-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-640x480.jpg">640x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1152x720.jpg">1152x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x720.jpg">1280x720</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x800.jpg">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-16/pineapple-summer-pop/nocal/june-16-pineapple-summer-pop-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Handmade Pony Gone Wild<p></p>
<p></p>
<p>“This piece was inspired by the <em>My Little Pony</em> cartoon series. Because those ponies irritated me so much as a kid, I always wanted to create a bad-ass pony.” — Designed by <a href="https://zedduo.com/">Zaheed Manuel</a> from South Africa.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/9ecba7a4-ccdd-4eb3-9795-995efcb317a8/june-14-hand-made-pony-gone-wild-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c35f3b3-fa61-4192-8b14-3fc8ad37eea9/june-14-hand-made-pony-gone-wild-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/8c35f3b3-fa61-4192-8b14-3fc8ad37eea9/june-14-hand-made-pony-gone-wild-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-800x600.jpg">800x600</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1280x1024.jpg">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1680x1050.jpg">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-1920x1200.jpg">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-2560x1440.jpg">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-14/hand-made-pony-gone-wild/nocal/june-14-hand-made-pony-gone-wild-nocal-2880x1800.jpg">2880x1800</a>
</li>
</ul>
<p></p>Window Of Opportunity<p></p>
<p></p>
<p>“‘Look deep into nature and then you will understand everything better,’ A.E.” — Designed by <a href="https://hirsdesign.com/">Antun Hiršman</a> from Croatia.</p>
<p></p>
<p></p>
<a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/45b3e801-54a5-4b2b-9fc7-73f10bf965c6/june-17-window-of-opportunity-full-opt.png"><img src="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4cf7e3de-ab36-4ce9-92f0-5d2535e74db1/june-17-window-of-opportunity-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/4cf7e3de-ab36-4ce9-92f0-5d2535e74db1/june-17-window-of-opportunity-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1024x768.jpg">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1280x960.jpg">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1366x768.jpg">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1440x900.jpg">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1600x1200.jpg">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1680x1200.jpg">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1920x1080.jpg">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-1920x1440.jpg">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-17/window-of-opportunity/nocal/june-17-window-of-opportunity-nocal-2560x1440.jpg">2560x1440</a>
</li>
</ul>
<p></p>Viking Meat War<p></p>
<p></p>
<p>Designed by <a href="https://ricardogimenes.com/">Ricardo Gimenes</a> from Spain.</p>
<p></p>
<p></p>
<a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/jun-13-meatwar-full-opt.png"><img src="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/jun-13-meatwar-preview-opt.png"></a><p></p>
<ul>
<li><a href="https://files.smashing.media/articles/desktop-wallpaper-calendars-june-2025/jun-13-meatwar-preview-opt.png">preview</a></li>
<li>without calendar: <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-320x480.png">320x480</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1024x768.png">1024x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1024x1024.png">1024x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1280x800.png">1280x800</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1280x960.png">1280x960</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1280x1024.png">1280x1024</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1366x768.png">1366x768</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1400x1050.png">1400x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1440x900.png">1440x900</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1600x1050.png">1600x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1600x1200.png">1600x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1680x1050.png">1680x1050</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1680x1200.png">1680x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1920x1080.png">1920x1080</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1920x1200.png">1920x1200</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-1920x1440.png">1920x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-2560x1440.png">2560x1440</a>, <a href="https://smashingmagazine.com/files/wallpapers/june-13/viking-meat-war/jun-13-meatwar-nocal-2880x1800.png">2880x1800</a>
</li>
</ul>
<p>The web is beginning to part ways with third-party cookies, a technology it once heavily relied on. <a href="https://en.wikipedia.org/wiki/HTTP_cookie">Introduced in 1994 by Netscape</a> to support features like virtual shopping carts, cookies have long been a staple of web functionality. However, concerns over <strong>privacy</strong> and <strong>security</strong> have led to a concerted effort to eliminate them. The World Wide Web Consortium Technical Architecture Group (W3C TAG) <a href="https://w3ctag.github.io/web-without-3p-cookies/">has been vocal in advocating</a> for the complete removal of third-party cookies from the web platform.</p>
<p>Major browsers (Chrome, Safari, Firefox, and Edge) are responding by phasing them out, though the transition is gradual. While this shift enhances user privacy, it also disrupts legitimate functionalities that rely on third-party cookies, such as single sign-on (SSO), fraud prevention, and embedded services. And because there is still no universal ban in place and many essential web features continue to depend on these cookies, developers must detect when third-party cookies are blocked so that applications can respond gracefully.</p>
Don’t Let Silent Failures Win: Why Cookie Detection Still Matters
<p>Yes, the ideal solution is to move away from third-party cookies altogether and redesign our integrations using privacy-first, purpose-built alternatives as soon as possible. But in reality, that migration can take months or even years, especially for legacy systems or third-party vendors. Meanwhile, users are already browsing with third-party cookies disabled and often have no idea that anything is missing.</p>
<p>Imagine a travel booking platform that embeds an iframe from a third-party partner to display live train or flight schedules. This embedded service uses a cookie on its own domain to authenticate the user and personalize content, like showing saved trips or loyalty rewards. But when the browser blocks third-party cookies, the iframe cannot access that data. Instead of a seamless experience, the user sees an error, a blank screen, or a login prompt that doesn’t work.</p>
<p>And while your team is still planning a long-term integration overhaul, this is already happening to real users. They don’t see a cookie policy; they just see a broken booking flow.</p>
<p>Detecting third-party cookie blocking isn’t just good technical hygiene but a frontline defense for user experience.</p>
Why It’s Hard To Tell If Third-Party Cookies Are Blocked
<p>Detecting whether third-party cookies are supported isn’t as simple as calling <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/cookieEnabled"><code>navigator.cookieEnabled</code></a>. Even a well-intentioned check like this one may look safe, but it still won’t tell you what you actually need to know:</p>
<div>
<pre><code>// DOES NOT detect third-party cookie blocking
function areCookiesEnabled() {
if (navigator.cookieEnabled === false) {
return false;
}
try {
document.cookie = "test_cookie=1; SameSite=None; Secure";
const hasCookie = document.cookie.includes("test_cookie=1");
document.cookie = "test_cookie=; Max-Age=0; SameSite=None; Secure";
return hasCookie;
} catch (e) {
return false;
}
}
</code></pre>
</div>
<p>This function only confirms that cookies work in the current (first-party) context. <strong>It says nothing about third-party scenarios</strong>, like an iframe on another domain. Worse, it’s misleading: in some browsers, <code>navigator.cookieEnabled</code> may still return <code>true</code> inside a third-party iframe even when cookies are blocked. Others might behave differently, leading to inconsistent and unreliable detection.</p>
<p>These cross-browser inconsistencies — combined with the limitations of <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie"><code>document.cookie</code></a> — make it clear that there is <strong>no shortcut for detection</strong>. To truly detect third-party cookie blocking, we need to understand <em>how</em> different browsers actually behave in embedded third-party contexts.</p>
How Modern Browsers Handle Third-Party Cookies
<p>The behavior of modern browsers directly affects which detection methods will work and which ones silently fail.</p>
<h3>Safari: Full Third-Party Cookie Blocking</h3>
<p>Since <a href="https://webkit.org/blog/10218/full-third-party-cookie-blocking-and-more/">version 13.1</a>, Safari blocks all third-party cookies by default, with no exceptions, even if the user previously interacted with the embedded domain. This policy is part of <a href="https://webkit.org/tracking-prevention/#intelligent-tracking-prevention-itp">Intelligent Tracking Prevention (ITP)</a>.</p>
<p>For embedded content (such as an SSO iframe) that requires cookie access, Safari exposes the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API">Storage Access API</a>, which requires a user gesture to grant storage permission. As a result, a test for third-party cookie support will nearly always fail in Safari unless the iframe explicitly requests access via this API.</p>
<h3>Firefox: Cookie Partitioning By Design</h3>
<p>Firefox’s <a href="https://support.mozilla.org/en-US/kb/total-cookie-protection-and-website-breakage-faq#w_what-is-total-cookie-protection">Total Cookie Protection</a> isolates cookies on a per-site basis. Third-party cookies can still be set and read, but they are partitioned by the top-level site, meaning a cookie set by the same third-party on <em>siteA.com</em> and <em>siteB.com</em> is stored separately and cannot be shared.</p>
<p>As of <a href="https://support.mozilla.org/en-US/kb/introducing-total-cookie-protection-standard-mode">Firefox 102</a>, this behavior is enabled by default in the Standard (default) mode of <a href="https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop">Enhanced Tracking Protection</a>. Unlike the Strict mode — which <a href="https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop#w_strict-enhanced-tracking-protection">blocks third-party cookies entirely</a>, similar to Safari — the Standard mode does not block them outright. Instead, it neutralizes their tracking capability by isolating them per site.</p>
<p>As a result, even if a test shows that a third-party cookie was successfully set, it may be useless for cross-site logins or shared sessions due to this <strong>partitioning</strong>. Detection logic needs to account for that.</p>
<h3>Chrome: From Deprecation Plans To Privacy Sandbox (And Industry Pushback)</h3>
<p>Chromium-based browsers still allow third-party cookies by default — but the story is changing. Starting with <a href="https://blog.chromium.org/2019/10/developers-get-ready-for-new.html">Chrome 80</a>, third-party cookies must be explicitly marked with <code>SameSite=None; Secure</code>, or they will be rejected.</p>
<p>In <a href="https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html">January 2020</a>, <strong>Google announced their intention</strong> to phase out third-party cookies by 2022. <strong>However, the timeline was updated multiple times</strong>, first in <a href="https://blog.google/products/chrome/updated-timeline-privacy-sandbox-milestones/?utm_source=chatgpt.com">June 2021</a> when the company pushed the rollout to begin in mid-2023 and conclude by the end of that year. Additional postponements followed in <a href="https://blog.google/products/chrome/update-testing-privacy-sandbox-web/">July 2022</a>, <a href="https://blog.google/products/chrome/privacy-sandbox-tracking-protection/">December 2023</a>, and <a href="https://privacysandbox.com/intl/en_us/news/update-on-the-plan-for-phase-out-of-third-party-cookies-on-chrome/">April 2024</a>.</p>
<p>In <a href="https://privacysandbox.com/news/privacy-sandbox-update/">July 2024</a>, <strong>Google has clarified that there is no plan to unilaterally deprecate third-party cookies or force users into a new model without consent</strong>. Instead, Chrome is shifting to a <strong>user-choice interface</strong> that will allow individuals to decide whether to block or allow third-party cookies globally.</p>
<p>This change was influenced in part by <a href="https://www.businessinsider.com/googles-plan-to-replace-tracking-cookies-faces-big-new-hurdles-2024-7">substantial pushback from the advertising industry</a>, as well as ongoing regulatory oversight, including <a href="https://www.gov.uk/cma-cases/investigation-into-googles-privacy-sandbox-browser-changes">scrutiny by the UK Competition and Markets Authority (CMA)</a> into <a href="https://privacysandbox.google.com/">Google’s Privacy Sandbox initiative</a>. The CMA confirmed in a 2025 update that there is no intention to force a deprecation or trigger automatic prompts for cookie blocking.</p>
<p>As for now, <strong>third-party cookies remain enabled by default in Chrome</strong>. The new user-facing controls and the broader Privacy Sandbox ecosystem are still in various stages of experimentation and limited rollout.</p>
<h3>Edge (Chromium-Based): Tracker-Focused Blocking With User Configurability</h3>
<p>Edge (which is a Chromium-based browser) <a href="https://learn.microsoft.com/en-us/microsoftteams/platform/resources/samesite-cookie-update#samesite-cookie-attribute-2020-release">shares Chrome’s handling of third-party cookies</a>, including the <code>SameSite=None; Secure</code> requirement. Additionally, Edge introduces <a href="https://learn.microsoft.com/en-us/microsoft-edge/web-platform/tracking-prevention">Tracking Prevention</a> modes: Basic, Balanced (default), and Strict. In Balanced mode, it blocks known third-party trackers using Microsoft’s maintained list but allows many third-party cookies that are not classified as trackers. Strict mode blocks more resource loads than Balanced, which may result in some websites not behaving as expected.</p>
<h3>Other Browsers: What About Them?</h3>
<p>Privacy-focused browsers, like Brave, <a href="https://support.brave.com/hc/en-us/articles/360054509991-How-do-I-manage-Cookies-and-Site-data-in-Brave-on-Android?utm_source=chatgpt.com">block third-party cookies by default</a> as part of their strong anti-tracking stance.</p>
<p>Internet Explorer (IE) 11 <a href="https://support.microsoft.com/en-us/topic/description-of-cookies-ad01aa7e-66c9-8ab2-7898-6652c100999d">allowed third-party cookies depending on user privacy settings</a> and the presence of <a href="https://www.w3.org/P3P/">Platform for Privacy Preferences (P3P)</a> headers. However, IE usage is now negligible. Notably, the default “Medium” privacy setting in IE could block third-party cookies unless a valid P3P policy was present.</p>
<p>Older versions of Safari had partial third-party cookie restrictions (such as <em>“Allow from websites I visit”</em>), but, as mentioned before, this was replaced with full blocking via ITP.</p>
<p><strong>As of 2025, all major browsers either block or isolate third-party cookies by default, with the exception of Chrome, which still allows them in standard browsing mode pending the rollout of its new user-choice model.</strong></p>
<p>To account for these variations, your detection strategy must be grounded in real-world testing — specifically by reproducing a genuine third-party context such as loading your script within an iframe on a cross-origin domain — rather than relying on browser names or versions.</p>
Overview Of Detection Techniques
<p>Over the years, many techniques have been used to detect third-party cookie blocking. Most are unreliable or obsolete. Here’s a quick walkthrough of what doesn’t work (and why) and what does.</p>
<h3>Basic JavaScript API Checks (Misleading)</h3>
<p>As mentioned earlier, the <code>navigator.cookieEnabled</code> or setting <code>document.cookie</code> on the main page doesn’t reflect cross-site cookie status:</p>
<ul>
<li>In third-party iframes, <code>navigator.cookieEnabled</code> often returns <code>true</code> even when cookies are blocked.</li>
<li>Setting <code>document.cookie</code> in the parent doesn’t test the third-party context.</li>
</ul>
<p>These checks are first-party only. <strong>Avoid using them for detection.</strong></p>
<h3>Storage Hacks Via <code>localStorage</code> (Obsolete)</h3>
<p>Previously, some developers inferred cookie support by checking if <code>window.localStorage</code> worked inside a third-party iframe — which is especially useful against older Safari versions that blocked all third-party storage.</p>
<p>Modern browsers often allow <code>localStorage</code> even when cookies are blocked. <strong>This leads to false positives and is no longer reliable.</strong></p>
<h3>Server-Assisted Cookie Probe (Heavyweight)</h3>
<p>One classic method involves setting a cookie from a third-party domain via HTTP and then checking if it comes back:</p>
<ol>
<li>Load a script/image from a third-party server that sets a cookie.</li>
<li>Immediately load another resource, and the server checks whether the cookie was sent.</li>
</ol>
<p>This works, but it:</p>
<ul>
<li>Requires custom server-side logic,</li>
<li>Depends on HTTP caching, response headers, and cookie attributes (<code>SameSite=None; Secure</code>), and</li>
<li>Adds development and infrastructure complexity.</li>
</ul>
<p>While this is <strong>technically valid</strong>, it is not suitable for a front-end-only approach, which is our focus here.</p>
<h3>Storage Access API (Supplemental Signal)</h3>
<p>The <code>document.hasStorageAccess()</code> method allows embedded third-party content to check if it has access to unpartitioned cookies:</p>
<ul>
<li>
<strong>Chrome</strong><br>Supports <code>hasStorageAccess()</code> and <code>requestStorageAccess()</code> starting from <a href="https://privacysandbox.google.com/cookies/storage-access-api#top-level_page_access">version 119</a>. Additionally, <code>hasUnpartitionedCookieAccess()</code> is available as an alias for <code>hasStorageAccess()</code> from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/hasUnpartitionedCookieAccess#browser_compatibility">version 125</a> onwards.</li>
<li>
<strong>Firefox</strong><br><a href="https://developer.mozilla.org/en-US/docs/Web/API/Storage_Access_API#browser_compatibility">Supports</a> both <code>hasStorageAccess()</code> and <code>requestStorageAccess()</code> methods.</li>
<li>
<strong>Safari</strong><br><a href="https://webkit.org/blog/11545/updates-to-the-storage-access-api/">Supports the Storage Access API</a>. However, <strong>access must always be triggered by a user interaction</strong>. For example, even calling <code>requestStorageAccess()</code> without a direct user gesture (like a click) is ignored.</li>
</ul>
<p>Chrome and Firefox also support the API, and in those browsers, it may work automatically or based on browser heuristics or site engagement.</p>
<p>This API is particularly useful for detecting scenarios where cookies are present but partitioned (e.g., Firefox’s Total Cookie Protection), as it helps determine if the iframe has unrestricted cookie access. But for now, it’s still best used as a <strong>supplemental signal</strong>, rather than a standalone check.</p>
<h3>iFrame + <code>postMessage</code> (Best Practice)</h3>
<p>Despite the existence of the Storage Access API, <strong>at the time of writing, this remains the most reliable and browser-compatible method</strong>:</p>
<ol>
<li>Embed a hidden iframe from a third-party domain.</li>
<li>Inside the iframe, attempt to set a test cookie.</li>
<li>Use <code>window.postMessage</code> to report success or failure to the parent.</li>
</ol>
<p>This approach works across all major browsers (when properly configured), requires no server (kind of, more on that next), and simulates a real-world third-party scenario. </p>
<p>We’ll implement this step-by-step next.</p>
<h3>Bonus: <code>Sec-Fetch-Storage-Access</code>
</h3>
<p>Chrome (starting in <a href="https://privacysandbox.google.com/blog/storage-access-headers-133">version 133</a>) is introducing <code>Sec-Fetch-Storage-Access</code>, an HTTP request header sent with cross-site requests to indicate whether the iframe has access to unpartitioned cookies. <strong>This header is only visible to servers and cannot be accessed via JavaScript.</strong> It’s useful for back-end analytics but not applicable for client-side cookie detection.</p>
<p>As of May 2025, this feature is only implemented in Chrome and is not supported by other browsers. However, it’s still good to know that it’s part of the evolving ecosystem.</p>
Step-by-Step: Detecting Third-Party Cookies Via iFrame
<p>So, what did I mean when I said that the last method we looked at “requires no server”? While this method doesn’t require any back-end logic (like server-set cookies or response inspection), it does require access to a separate domain — or at least a cross-site subdomain — to simulate a third-party environment. This means the following:</p>
<ul>
<li>You must serve the test page from a different domain or public subdomain, e.g., <code>example.com</code> and <code>cookietest.example.com</code>,</li>
<li>The domain needs HTTPS (for <code>SameSite=None; Secure</code> cookies to work), and</li>
<li>You’ll need to host a simple static file (the test page), even if no server code is involved.</li>
</ul>
<p>Once that’s set up, the rest of the logic is fully client-side.</p>
<h3>Step 1: Create A Cookie Test Page (On A Third-Party Domain)</h3>
<p>Minimal version (e.g., <code>https://cookietest.example.com/cookie-check.html</code>):</p>
<div>
<pre><code><!DOCTYPE html>
<html>
<body>
<script>
document.cookie = "thirdparty_test=1; SameSite=None; Secure; Path=/;";
const cookieFound = document.cookie.includes("thirdparty_test=1");
const sendResult = (status) => window.parent?.postMessage(status, "*");
if (cookieFound && document.hasStorageAccess instanceof Function) {
document.hasStorageAccess().then((hasAccess) => {
sendResult(hasAccess ? "TP_COOKIE_SUPPORTED" : "TP_COOKIE_BLOCKED");
}).catch(() => sendResult("TP_COOKIE_BLOCKED"));
} else {
sendResult(cookieFound ? "TP_COOKIE_SUPPORTED" : "TP_COOKIE_BLOCKED");
}
</script>
</body>
</html>
</code></pre>
</div>
<p>Make sure the page is served over HTTPS, and the cookie uses <code>SameSite=None; Secure</code>. Without these attributes, modern browsers will silently reject it.</p>
<h3>Step 2: Embed The iFrame And Listen For The Result</h3>
<p>On your main page:</p>
<div>
<pre><code>function checkThirdPartyCookies() {
return new Promise((resolve) => {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = "<a href="https://cookietest.example.com/cookie-check.html%22">https://cookietest.example.com/cookie-check.html"</a>; // your subdomain
document.body.appendChild(iframe);
let resolved = false;
const cleanup = (result, timedOut = false) => {
if (resolved) return;
resolved = true;
window.removeEventListener('message', onMessage);
iframe.remove();
resolve({ thirdPartyCookiesEnabled: result, timedOut });
};
const onMessage = (event) => {
if (["TP_COOKIE_SUPPORTED", "TP_COOKIE_BLOCKED"].includes(event.data)) {
cleanup(event.data === "TP_COOKIE_SUPPORTED", false);
}
};
window.addEventListener('message', onMessage);
setTimeout(() => cleanup(false, true), 1000);
});
}
</code></pre>
</div>
<p>Example usage:</p>
<div>
<pre><code>checkThirdPartyCookies().then(({ thirdPartyCookiesEnabled, timedOut }) => {
if (!thirdPartyCookiesEnabled) {
someCookiesBlockedCallback(); // Third-party cookies are blocked.
if (timedOut) {
// No response received (iframe possibly blocked).
// Optional fallback UX goes here.
someCookiesBlockedTimeoutCallback();
};
}
});
</code></pre>
</div>
<h3>Step 3: Enhance Detection With The Storage Access API</h3>
<p>In Safari, even when third-party cookies are blocked, users can manually grant access through the Storage Access API — but only in response to a user gesture.</p>
<p>Here’s how you could implement that in your iframe test page:</p>
<div>
<pre><code><button id="enable-cookies">This embedded content requires cookie access. Click below to continue.</button>
<script>
document.getElementById('enable-cookies')?.addEventListener('click', async () => {
if (document.requestStorageAccess && typeof document.requestStorageAccess === 'function') {
try {
const granted = await document.requestStorageAccess();
if (granted !== false) {
window.parent.postMessage("TP_STORAGE_ACCESS_GRANTED", "*");
} else {
window.parent.postMessage("TP_STORAGE_ACCESS_DENIED", "*");
}
} catch (e) {
window.parent.postMessage("TP_STORAGE_ACCESS_FAILED", "*");
}
}
});
</script>
</code></pre>
</div>
<p>Then, on the parent page, you can listen for this message and retry detection if needed: </p>
<div>
<pre><code>// Inside the same <code>onMessage</code> listener from before:
if (event.data === "TP_STORAGE_ACCESS_GRANTED") {
// Optionally: retry the cookie test, or reload iframe logic
checkThirdPartyCookies().then(handleResultAgain);
}
</code></pre>
</div>
(Bonus) A Purely Client-Side Fallback (Not Perfect, But Sometimes Necessary)
<p>In some situations, you might not have access to a second domain or can’t host third-party content under your control. That makes the iframe method unfeasible.</p>
<p>When that’s the case, your best option is to <strong>combine multiple signals</strong> — basic cookie checks, <code>hasStorageAccess()</code>, <code>localStorage</code> fallbacks, and maybe even passive indicators like load failures or timeouts — to <strong>infer</strong> whether third-party cookies are likely blocked.</p>
<p>The important caveat: <strong>This will never be 100% accurate.</strong> But, in constrained environments, “better something than nothing” may still improve the UX.</p>
<p>Here’s a basic example:</p>
<div>
<pre><code>async function inferCookieSupportFallback() {
let hasCookieAPI = navigator.cookieEnabled;
let canSetCookie = false;
let hasStorageAccess = false;
try {
document.cookie = "testfallback=1; SameSite=None; Secure; Path=/;";
canSetCookie = document.cookie.includes("test_fallback=1");
document.cookie = "test_fallback=; Max-Age=0; Path=/;";
} catch (_) {
canSetCookie = false;
}
if (typeof document.hasStorageAccess === "function") {
try {
hasStorageAccess = await document.hasStorageAccess();
} catch (_) {}
}
return {
inferredThirdPartyCookies: hasCookieAPI && canSetCookie && hasStorageAccess,
raw: { hasCookieAPI, canSetCookie, hasStorageAccess }
};
}
</code></pre>
</div>
<p>Example usage:</p>
<div>
<pre><code>inferCookieSupportFallback().then(({ inferredThirdPartyCookies }) => {
if (inferredThirdPartyCookies) {
console.log("Cookies likely supported. Likely, yes.");
} else {
console.warn("Cookies may be blocked or partitioned.");
// You could inform the user or adjust behavior accordingly
}
});
</code></pre>
</div>
<p>Use this fallback when:</p>
<ul>
<li>You’re building a JavaScript-only widget embedded on unknown sites,</li>
<li>You don’t control a second domain (or the team refuses to add one), or</li>
<li>You just need <em>some</em> visibility into user-side behavior (e.g., debugging UX issues).</li>
</ul>
<p><strong>Don’t rely on it for security-critical logic (e.g., auth gating)!</strong> But it may help tailor the user experience, surface warnings, or decide whether to attempt a fallback SSO flow. Again, it’s better to have something rather than nothing.</p>
Fallback Strategies When Third-Party Cookies Are Blocked
<p>Detecting blocked cookies is only half the battle. Once you know they’re unavailable, what can you do? Here are some practical options that might be useful for you:</p>
<h3>Redirect-Based Flows</h3>
<p>For auth-related flows, switch from embedded iframes to top-level redirects. Let the user authenticate directly on the identity provider's site, then redirect back. It works in all browsers, but the UX might be less seamless.</p>
<h3>Request Storage Access</h3>
<p>Prompt the user using <code>requestStorageAccess()</code> after a clear UI gesture (Safari requires this). Use this to re-enable cookies <strong>without leaving the page</strong>.</p>
<h3>Token-Based Communication</h3>
<p>Pass session info directly from parent to iframe via:</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage"><code>postMessage</code></a> (with required <a href="https://owasp.org/www-project-web-security-testing-guide/latest/4-Web_Application_Security_Testing/11-Client-side_Testing/11-Testing_Web_Messaging"><code>origin</code></a>);</li>
<li>Query params (e.g., signed JWT in iframe URL).</li>
</ul>
<p>This avoids reliance on cookies entirely but requires coordination between both sides:</p>
<div>
<pre><code>// Parent
const iframe = document.getElementById('my-iframe');
iframe.onload = () => {
const token = getAccessTokenSomehow(); // JWT or anything else
iframe.contentWindow.postMessage(
{ type: 'AUTH_TOKEN', token },
'<a href="https://iframe.example.com'/">https://iframe.example.com'</a> // Set the correct origin!
);
};
// iframe
window.addEventListener('message', (event) => {
if (event.origin !== '<a href="https://parent.example.com'/">https://parent.example.com'</a>) return;
const { type, token } = event.data;
if (type === 'AUTH_TOKEN') {
validateAndUseToken(token); // process JWT, init session, etc
}
});
</code></pre>
</div>
<h3>Partitioned Cookies (CHIPS)</h3>
<p>Chrome (since version 114) and other Chromium-based browsers now support cookies with the Partitioned attribute (known as <a href="https://privacysandbox.google.com/cookies/chips">CHIPS</a>), allowing per-top-site cookie isolation. This is useful for widgets like chat or embedded forms where cross-site identity isn’t needed.</p>
<blockquote>
<strong>Note</strong>: Firefox and Safari don’t support the <code>Partitioned</code> cookie attribute. Firefox enforces cookie partitioning by default using a different mechanism (Total Cookie Protection), while Safari blocks third-party cookies entirely.</blockquote>
<p>But be careful, as they are treated as “blocked” by basic detection. Refine your logic if needed.</p>
Final Thought: Transparency, Transition, And The Path Forward
<p>Third-party cookies are disappearing, albeit gradually and unevenly. Until the transition is complete, your job as a developer is to bridge the gap between technical limitations and real-world user experience. That means:</p>
<ul>
<li>
<strong>Keep an eye on the standards.</strong><br>APIs like <a href="https://privacysandbox.google.com/cookies/fedcm">FedCM</a> and Privacy Sandbox features (<a href="https://privacysandbox.google.com/private-advertising/topics?hl=en">Topics</a>, <a href="https://privacysandbox.google.com/private-advertising/attribution-reporting">Attribution Reporting</a>, <a href="https://privacysandbox.google.com/private-advertising/fenced-frame">Fenced Frames</a>) are reshaping how we handle identity and analytics without relying on cross-site cookies.</li>
<li>
<strong>Combine detection with graceful fallback.</strong><br>Whether it’s offering a redirect flow, using <code>requestStorageAccess()</code>, or falling back to token-based messaging — every small UX improvement adds up.</li>
<li>
<strong>Inform your users.</strong><br>Users shouldn't be left wondering why something worked in one browser but silently broke in another. Don’t let them feel like they did something wrong — just help them move forward. A clear, friendly message can prevent this confusion.</li>
</ul>
<p>The good news? You don’t need a perfect solution today, just a resilient one. By detecting issues early and handling them thoughtfully, you protect both your users and your future architecture, one cookie-less browser at a time.</p>
<p>And as seen with Chrome’s pivot away from automatic deprecation, the transition is not always linear. Industry feedback, regulatory oversight, and evolving technical realities continue to shape the time and the solutions.</p>
<p>And don’t forget: <em>having something is better than nothing</em>.</p>