Everybody loves a beautiful wallpaper to freshen up their desktops and home screens, right? To cater for new and unique artworks on a regular basis, we started our monthly wallpapers series more than 13 years ago, and from the very beginning to today, artists and designers from across the globe have accepted the challenge and submitted their designs to it. Just like this month.In this post, youll find their wallpaper designs for August 2024. All of them come in versions with and without a calendar and can be downloaded for free. As a little bonus goodie, we also added a selection of August favorites from our wallpapers archives that are just too good to be forgotten. A big thank-you to everyone who shared their designs with us this month! Happy August!You can click on every image to see a larger preview,We respect and carefully consider the ideas and motivation behind each and every artists work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers werent anyhow influenced by us but rather designed from scratch by the artists themselves.Submit a wallpaper!Did you know that you could get featured in our next wallpapers post, too? We are always looking for creative talent.NostalgiaAugust, the final breath of summer, brings with it a wistful nostalgia for a season not yet past. Designed by Ami Totorean from Romania.previewwith calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Relax In Bora-BoraAs we have taken a liking to diving through the coral reefs, well also spend August diving and took the leap to Bora-Bora. There we enjoy the sea and nature and above all, we rest to gain strength for the new course that is to come. Designed by Veronica Valenzuela from Spain.previewwith calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440without calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Sandcastle DayJoin us on Sandcastle Day for a fun-filled beach adventure, where creativity meets the sand build, play, and enjoy the sun! Designed by PopArt Studio from Serbia.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Banana!Designed by Ricardo Gimenes from Sweden.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160CullionDesigned by Bhabna Basak from India.previewwith calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Pirate Aged RumDesigned by Ricardo Gimenes from Sweden.previewwith calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160without calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160World Friendship DayCherish the bonds of friendship, share smiles, and create beautiful memories with your friends. Lets spread love and joy together! Designed by Reethu from London.previewwith calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Summer DayDesigned by Kasturi Palmal from India.previewwithout calendar: 800x600, 1280x1024, 1600x1200, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Retro Road TripAs the sun dips below the horizon, casting a warm glow upon the open road, the retro van finds a resting place for the night. A campsite bathed in moonlight or a cozy motel straight from a postcard become havens where weary travelers can rest, rejuvenate, and prepare for the adventures that await with the dawn of a new day. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Spooky Campfire StoriesDesigned by Ricardo Gimenes from Sweden.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Happiness Happens In AugustMany people find August one of the happiest months of the year because of holidays. You can spend days sunbathing, swimming, birdwatching, listening to their joyful chirping, and indulging in sheer summer bliss. August 8th is also known as the Happiness Happens Day, so make it worthwhile. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Bee Happy!August means that fall is just around the corner, so I designed this wallpaper to remind everyone to bee happy even though summer is almost over. Sweeter things are ahead! Designed by Emily Haines from the United States.previewwithout calendar: 640x480, 800x600, 1280x720, 1280x800, 1280x960, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Colorful SummerAlways keep mint on your windowsill in August, to ensure that the buzzing flies will stay outside where they belong. Dont think summer is over, even when roses droop and turn brown and the stars shift position in the sky. Never presume August is a safe or reliable time of the year. (Alice Hoffman) Designed by Lvi from Hungary.previewwithout calendar: 800x480, 1024x768, 1280x720, 1280x1024, 1400x1050, 1680x1050, 1680x1200, 1920x1200, 2560x1440, 3475x4633Psst, Its Camping TimeAugust is one of my favorite months, when the nights are long and deep and crackling fire makes you think of many things at once and nothing at all at the same time. Its about heat and cold which allow you to touch the eternity for a few moments. Designed by Igor Izhik from Canada.previewwithout calendar: 1024x768, 1024x1024, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Oh La La Paris NightI like the Paris night! All is very bright! Designed by Vernica Valenzuela from Spain.previewwithout calendar: 800x480, 1024x768, 1152x864, 1280x800, 1280x960, 1440x900, 1680x1200, 1920x1080, 2560x1440Summer NapDesigned by Dorvan Davoudi from Canada.previewwithout calendar: 800x480, 800x600, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Shrimp PartyA nice summer shrimp party! Designed by Pedro Rolo from Portugal.previewwithout calendar: 320x480, 800x600, 1280x800, 1440x900, 1600x1200, 1920x1080, 2560x1440CowabungaDesigned by Ricardo Gimenes from Sweden.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160Childhood MemoriesDesigned by Francesco Paratici from Australia.previewwithout calendar: 320x480, 1024x768, 1024x1024, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1920x1080, 1920x1200, 2560x1440Live In The MomentMy dog Sami inspired me for this one. He lives in the moment and enjoys every second with a big smile on his face. I wish we could learn to enjoy life like he does! Happy August everyone! Designed by Westie Vibes from Portugal.previewwithout calendar: 320x480, 1024x1024, 1080x1920, 1680x1200, 1920x1080, 2560x1440Swimming In The SummerIts the perfect evening and the water is so warm! Can you feel it? You move your legs just a little bit and you feel the water bubbles dancing around you! Its just you in there, floating in the clean lake and small sparkly lights shining above you! Its a wonderful feeling, isnt it? Designed by Creative Pinky from the Netherlands.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Its Vacation OClock!Its vacation oclock! Or is it? While we bend our backs in front of a screen, its hard not to think about sandy beaches, flipping the pages of a corny book under the umbrella while waves splash continuously. Summer days! So hard to bear them in the city, so pleasant when youre living the dolce far niente. Designed by ActiveCollab from the United States.previewwithout calendar: 1080x1920, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440LaunchThe warm, clear summer nights make me notice the stars more thats what inspired this space-themed design! Designed by James Mitchell from the United Kingdom.previewwithout calendar: 1280x720, 1280x800, 1366x768, 1440x900, 1680x1050, 1920x1080, 1920x1200, 2560x1440, 2880x1800AhoyDesigned by Webshift 2.0 from South Africa.previewwithout calendar: 1366x768, 1440x900, 1680x1050, 1920x1080, 1920x1200, 2560x1440Rain, Rain Go Away!Remember the nursery rhyme where the little boy pleads the rain to go away? It is one of the most pleasant and beautiful seasons when the whole universe buckles up to dance to the rhythm of the drizzles that splash across the earth. And, it is August, the time of the year when monsoons add a lot of color and beauty to nature. We welcome everyone to enjoy the awesomeness of monsoons. Designed by Acodez from India.previewwithout calendar: 320x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x960, 1280x1024, 1366x768, 1440x900, 1440x1050, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Olympic SummerThe Summer Olympic Games promise two weeks of superhuman struggle for eternal glory. Support your favorites and enjoy hot August. Designed by PopArt Studio from Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Handwritten AugustI love typography handwritten style. Designed by Chalermkiat Oncharoen from Thailand.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Hello AgainIn Melbourne it is the last month of quite a cool winter so we are looking forward to some warmer days to come. Designed by Tazi from Australia.previewwithout calendar: 320x480, 640x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x960, 1600x1200, 1920x1080, 1920x1440, 2560x1440El Pollo PepeSummer is beach and swimming pool, but it means countryside, too. We enjoy those summer afternoons with our friend El pollo Pepe. Happy summer! Designed by Veronica Valenzuela from Spain.previewwithout calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440Coffee Break TimeDesigned by Ricardo Gimenes from Sweden.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Subtle August ChamomilesOur designers wanted to create something summery, but not very colorful, something more subtle. The first thing that came to mind was chamomile because there are a lot of them in Ukraine and their smell is associated with a summer field. Designed by MasterBundles from Ukraine.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Work Hard, Play HardIt seems the feeling of summer breaks we had back in school never leaves us. The mere thought of alarm clocks feels wrong in the summer, especially if youve recently come back from a trip to the seaside. So, we try to do our best during working hours and then compensate with fun activities and plenty of rest. Cheers! Designed by ActiveCollab from the United States.previewwithout calendar: 1080x1920, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 3840x2160

Whether youve launched a redesign of your website or rolled out a new feature in your app, that is the point where people normally move on to the next project. But, that is a mistake. Its only once a site, app, or feature goes live that we get to see actual users interacting with it in a completely natural way. Its only then that we know if it has succeeded or failed.Not that things are ever that black and white. Even if it does seem successful, theres always room for improvement. This is particularly true with conversion rate optimization. Even small tweaks can lead to significant increases in revenue, leads, or other key metrics.Want to learn more on testing and improving your website? Join Paul Boag in his upcoming live workshop on Fast and Budget-Friendly User Research and Testing, starting July 11. Making Time for Post-Launch IterationThe key is to build in time for post-launch optimization from the very beginning. When you define your project timeline or sprint, dont equate launch with the end. Instead, set the launch of the new site, app, or feature about two-thirds of the way through your timeline. This leaves time after launch for monitoring and iteration.Better still, divide your teams time into two work streams. One would focus on innovation rolling out new features or content. The second would focus on optimization and improving what is already online.In short, do anything you can to ring-fence at least some time for optimizing the experience post-launch.Once youve done that, you can start identifying areas in your site or app that are underperforming and could do with improvement.Identifying Problem PointsThis is where analytics can help. Look for areas with high bounce rates or exit points. Users are dropping off at these points. Also, look for low-performing conversion points. But dont forget to consider this as a percentage of the traffic the page or feature gets. Otherwise, your most popular pages will always seem like the biggest problem.To be honest, this is more fiddly than it should be in Google Analytics 4, so if youre not familiar with the platform you might need some help.Not that Google Analytics is the only tool that can help; I also highly recommend Microsoft Clarity. This free tool provides detailed user data. It includes session recordings and heatmaps. These help you find where to improve on your website or app.Play particular attention to insights which will show you metrics including:Rage clicksWhere people repeatedly click something out of frustration.Dead clicksWhere people click on something that isnt clickable.Excessive scrollingWhere people scroll up and down looking for something.Quick backsWhere people visit a page by mistake and quickly return to the previous page.Along with exits and bounces, these metrics indicate that something is wrong and should be looked at in more depth.Diagnosing The Specific IssuesOnce youve found a problem page, the next challenge is diagnosing exactly whats going wrong.I tend to start by looking at heat maps of the page that you can find in Clarity or similar tools. These heatmaps will show you where people are engaged on the page and potentially indicate problems.If that doesnt help, I will watch recordings of people showing the problem behavior. Watching these session recordings can provide priceless insights. They show the specific pain points users are facing. They can guide you to potential solutions.If I am still confused about the problem, I may run a survey. Ill ask users about their experience. Or, I may recruit some people and run usability testing on the page.Surveys are easier to run, but can be somewhat disruptive and dont always provide the desired insights. If I do use a survey, I will normally only display it on exit-intent to minimize disruption to the user experience.If I run usability testing, I favor facilitated testing in this scenario. Although more time-consuming to run, it allows me to ask questions that almost always uncover the problem on the page. Normally, you can get away with only testing with 3 to 6 people.Once youve identified the specific issue, you can then start experimenting with solutions to address it.Testing Possible SolutionsThere are almost always multiple ways of addressing any given issue, so its important to test different approaches to find the best. How you approach this testing will depend on the complexity of your solution.Sometimes a problem can be fixed with a simple solution involving some UI tweaks or content changes. In this case, you can simply test the variations using A/B testing to see which performs better.A/B Test Smaller ChangesIf you havent done A/B testing before, it really isnt that complicated. The only downside is that A/B testing tools are massively overpriced in my opinion. That said, Crazy Egg is more reasonable (although not as powerful) and there is a free tier with VWO.Using an A/B testing tool starts by setting a goal, like adding an item to the basket. Then, you make versions of the page with your proposed improvement. These are shown to a percentage of visitors.Making the changes is normally done through a simple WYSIWYG interface and it only takes a couple of minutes.If your site has lots of traffic, I would encourage you to explore as many possible solutions as possible. If you have a smaller site, focus on testing just a couple of ideas. Otherwise, it will take forever to see results.Also, with lower-traffic sites, keep the goal as close to the experiment as possible to maximize the amount of traffic. If theres a big gap between goal and experiment, a lot of people will drop out during the process, and youll have to wait longer for results.Not that A/B testing is always the right way to test ideas. When your solution is more complex, involving new functionality or multiple screens, A/B testing wont work well. Thats because to A/B test that level of change, you need to effectively build the solution, negating most of the benefits A/B testing provides.Prototype And Test Larger ChangesInstead, your best option in such circumstances is to build a prototype that you can test with remote testing.In the first instance, I tend to run unfacilitated testing using a tool like Maze. Unfacilitated testing is quick to set up, takes little of your time, and Maze will even provide you with analytics on success rates.But, if unfacilitated testing finds problems and you doubt how to fix them, then consider facilitated testing. Thats because facilitated testing allows you to ask questions and get to the heart of any issues that might arise.The only drawback of usability testing over A/B testing is recruitment. It can be hard to find the right participants. If thats the case, consider using a service like Askable, who will carry out recruitment for you for a small fee.Failing that, dont be afraid to use friends and family as in most cases getting the exact demographic is less important than you might think. As long as people have comparable physical and cognitive abilities, you shouldnt have a problem. The only exception is if the content of your website or app is highly specialized.That said, I would avoid using anybody who works for the organization. They will inevitably be institutionalized and unable to provide unbiased feedback.Whatever approach you use to test your solution, once youre happy, you can push that change live for all users. But, your work is still not done.Rinse And RepeatOnce youve solved one issue, return to your analytics. Find the next biggest problem. Repeat the whole process. As you fix some problems, more will become apparent, and so youll quickly find yourself with an ongoing program of improvements that can be made.The more you carry out this kind of work, the more the benefits will become obvious. You will gradually see improvements in metrics like engagement, conversion, and user satisfaction. You can use these metrics to make the case to management for ongoing optimization. This is better than the trap of releasing feature after feature with no regard for their performance.Meet Fast and Budget-Friendly User Research And TestingIf you are interested in User Research and Testing, check out Pauls workshop on Fast and Budget-Friendly User Research and Testing, kicking off July 11.Jump to the workshopLive workshop with real-life examples.5h live workshop + friendly Q&A.

Prior to the World Wide Web, the act of writing remained consistent for centuries. Words were put on paper, and occasionally, people would read them. The tools might change quills, printing presses, typewriters, pens, what have you and an adventurous author may perhaps throw in imagery to compliment their copy.We all know that the web shook things up. With its arrival, writing could become interactive and dynamic. As web development progressed, the creative possibilities of digital content grew and continue to grow exponentially. The line between web writing and web technologies is blurry these days, and by and large, I think thats a good thing, though it brings its own challenges. As a sometimes-engineer-sometimes-journalist, I straddle those worlds more than most and have grown to view the overlap as the future. Writing for the web is different from traditional forms of writing. It is not a one-size-fits-all process. Id like to share the benefits of writing content in digital formats like MDX using a personal project of mine as an example. And, by the end, my hope is to convince you of the greater writing benefits of MDX over more traditional formats.A Little About MarkdownAt its most basic, MDX is Markdown with components in it. For those not in the know, Markdown is a lightweight markup language created by John Gruber in 2003, and its everywhere today. GitHub, Trello, Discord all sorts of sites and services use it. Its especially popular for authoring blog posts, which makes sense as blogging is very much the digital equivalent of journaling. The syntax doesnt get in the way, and many content management systems support it.Markdowns goal is an easy-to-read and easy-to-write plain text format that can readily be converted into XHTML/HTML if needed. Since its inception, Markdown was supposed to facilitate a writing workflow that integrated the physical act of writing with digital publishing. Well get to actual examples later, but for the sake of explanation, compare a block of text written in HTML to the same text written in Markdown.HTML is a pretty legible format as it is:<h2>Post Title</h2><p>This is an example block of text written in HTML. We can link things up like this, or format the code with <strong>bolding</strong> and <em>italics</em>. We can also make lists of items:</p><ul> <li>Like this item<li> <li>Or this one</li> <li>Perhaos a third?</li></ul><img src="image.avif" alt="And who doesn't enjoy an image every now and then?">But Markdown is somehow even less invasive:## Post TitleThis is an example block of text written in HTML. We can link things up like this or format the code with **bolding** and *italics*. We can also make lists of items:- Like this item- Or this one- Perhaos a third?Ive become a Markdown disciple since I first learned to code. Its clean and relatively simple syntax and wide compatibilities make it no wonder that Markdown is as pervasive today as it is. Having structural semantics akin to HTML while preserving the flow of plain text writing is a good place to be. However, it could be accused of being a bit too clean at times. If you want to communicate with words and images, youre golden, but if you want to jazz things up, youll find yourself looking further afield for other options.Gruber set out to create a format for writing for the web, and given its ongoing popularity, you have to say he succeeded, yet the web 20 years ago is a long way away from what it is today.This is the all-important context for what I want to discuss about MDX because MDX is an offshoot of Markdown, only more capable of supporting richer forms of multimedia and even user interaction. But before we get into that, we should also discuss the concept of web components because thats the second significant piece that MDX brings to the table.Further ReadingThoughts On Markdown by Knut Melvr Improving The Accessibility Of Your Markdown by Eric BaileyA Little About ComponentsThe move towards richer multimedia websites and apps has led to a thriving ecosystem of web development frameworks and libraries, including React, Vue, Svelte, and Astro, to name a few. The idea that we can have reusable components that are not only interactive but also respond to each other has driven this growth and continues to push on evolving web platform features like web components.MDX is like a bridge that connects Markdown with modern web tooling. Simply put, MDX weds Markdowns simplicity with the creative possibilities of modern web frameworks.By leaning into the overlaps rather than trying to abstract them away at all costs, we find untold potential for beautiful digital content.Further ReadingThe Key To Good Component Design Is Selfishness by Daniel YuschickDeveloper Decisions For Building Flexible Components by Michelle BarkerWhen CSS Isnt Enough: JavaScript Requirements For Accessible Components by Stephanie EcklesA Complete Guide To Accessible Front-End Components by Vitaly FriedmanA Case StudyMy own experience with MDX took shape in a side project of mine: teeline.online. To cut a long story short, before I was a software engineer, I was a journalist, and part of my training involved learning a type of shorthand called Teeline. What it boils down to is ripping out as many superfluous letters as possible I like to call this process disemvowelment then using Teelines alphabet to write the remaining content. This has allowed people like me to write lots of words very quickly.During my studies, I found online learning resources lacking, so as my engineering skills improved, I started working on the kind of site Id have used when I was a student if it was available. Hence, teeline.online.I built the teeling.online site with the Svelte framework for its components. The sites centerpiece is a dataset of shorthand characters and combinations with which hundreds of outlines can be rendered, combined, and animated as SVG paths.Likewise, Teelines disemvowelment script could be wired into a single component that I could then use as many times as I like.Then, of course, as is only natural when working with components, I could combine them to show the Teeline evolution that converts longhand words into shorthand outlines.The Markdown, meanwhile, looks as simple as this:Its not exactly the sort of complex codebase you might expect for an app. Meanwhile, the files themselves can sit in a nice, tidy directory of their own:The syllabus is neatly filed away in its own folder. With a bit of metadata sprinkled in, I have everything I need to render an entire section of the site using routing. The setup feels like a fluid medium between worlds. If you want to write with words and pictures, you can. If an idea comes to mind for a component that would better express what youre going for, you can go make it and drop it in.In fairness, a WordToOutline component like this might not mean much to Teeline newcomers, though with such a clear connection between the Markdown and the rendered pages, its not much of a stretch to work out what it is. And, of course, theres always the likes of services like Storybook that can be used to organize component libraries as they grow. The raw form of multimedia content can be pretty unsightly something that needs to be kept at arms length by content management systems. With MDX and its ilk the content feels rather friendly and legible. BenefitsI think you can start to see some of the benefits of an MDX setup like this. There are two key benefits in particulart that I think are worth calling out.Editorial BenefitsFirst and foremost, MDX doesnt distract the writing and editorial flow of working with content. When were working with traditional code languages, even HTML, the code format is convoluted with things like opening and closing tags. And its even more convoluted if we need the added complexity of embedding components in the content.MDX (and Markdown, for that matter) is much less verbose. Content is a first-class citizen that takes up way less space than typical markup, making it clear and legible. And where we need the complex affordance of components, those can be dropped in without disrupting that nice editorial experience.Another key benefit of using MDX is reusability. If, for example, I want to display the same information as images instead, each image would have to be bespoke. But we all know how inefficient it is to maintain content in raster images it requires making edits in a completely different application, which is highly inconvenient. With an old-school approach, if I update the design of the site, Im left having to create dozens of images in the new style.With MDX (or an equivalent like MDsveX), I only need to make the change once, and it updates everywhere. Having done the leg work of building reusable components, I can weave them throughout the syllabus as I see fit, safe in the knowledge that updates will roll out across the board and do it without affecting the editorial experience whatsoever.Consider the time it would take to create images or videos representing the same thing. Over time, using fixed assets like images becomes a form of technical or perhaps editorial debt that adds up over time, while a multimedia approach that leans into components proves to be faster and more flexible than vanilla methods.Tech BenefitsI just made the point that working with reusable components in MDX allows Markdown content to become more robust without affecting the contents legibility as we author it. Using Sveltes version of MDX, MDsveX, I was able to combine the clean, readable conventions of Markdown with the rich, interactive potential of components.CaveatsIts only right that all my gushing about MDX and its benefits be tempered with a reality check or two. Like anything else, MDX has its limitations, and your mileage with it will vary.That said, I believe that those limitations are likely to show up when MDX is perhaps not the best choice for a particular project. Theres a sweet spot that MDX fills and its when we need to sprinkle in additional web functionality to the content. We get the best of two worlds: minimal markup and modern web features.But if components arent needed, MDX is overkill when all you need is a clean way to write content that ports nicely into HTML to be consumed by whatever app or platform you use to display it on the web.Without components, MDX is akin to caring for a skinned elbow with a cast; its way more than whats needed in that situation, and the returns you get from Markdowns legibility will diminish.Similarly, if your technical needs go beyond components, you may be looking at a more complex architecture than what MDX can support, and you would be best leaning into what works best for content in the particular framework or stack youre using.Code doesnt age as well as words or images do. An MDX-esque approach does sign you up for the maintenance work of dependency updates, refactoring, and god forbid framework migrations. I havent had to face the last of those realities yet, though Id say the first two are well worth it. Indeed, theyre good habits to keep.Key TakeawaysWriting with MDX continues to be a learning experience for me, but its already made a positive impact on my editorial work. Specifically, Ive found that MEX improves the quality of my writing. I think more laterally about how to convey ideas.Is what Im saying best conveyed in words, an image, or a data visualization? Perhaps an interactive game?There is way more potential to enhance my words with componentry than I would get with Markdown alone, opening more avenues for what I can say and how I say it.Of course, those components do not come for free. MDX does sign you up to build those, regardless of whether you have a set of predefined components included in your framework. At the same time, Id argue that the opportunities MDX opens up for writing greatly outweigh having to build or maintain a few components.If MDX had been around in the age of Leonardo Di Vinci, perhaps he may have reached for MDX in his journals. I know Im taking a great leap of assumption here, but the complexity of what he was writing and trying to describe in technical terms with illustrations would have benefited greatly from MDX for everything from interactive demos of his ideas to a better writing experience overall.Further ReadingThe Power of Pen and Paper Sketching by Tracy OsborneWhat Leonardo Da Vinci Can Teach Us About Web Design by Frederick OBrienMultimedia WritingIn many respects, MDXs rich, varied way of approaching content is something that Markdown and writing for the web in general encourages already. We dont think only in terms of words but of links, images, and semantic structure. MDX and its equivalents merely take the lid off the cookie jar so we can enhance our work.Wouldnt it be nice if is a redundant turn of phrase on the web. There may be technical hurdles or, in my case, skill and knowledge hurdles but its a buzz to think about ways in which your thoughts can best manifest on screen.At the same time, the simplicity of Markdown is so unintrusive. If someone wants to write content formatted in vanilla Markdown, its totally possible to do that without trading up to MDX.Just having the possibility of bespoke multimedia content is enough to change the creative process. It leaves you using words because you want to, not because you have to.Why describe the solar system when you can render an explorable one? Why have a picture of a proposed skyscraper when you can display a 3D model? Writing with MDX (or, more accurately, MDsveX) has changed my entire thought process. Potential answers to the question, How do I best get this across?, become more expansive.As You PleaseGood things happen when worlds collide. New possibilities emerge when seemingly disparate things come together. Many content management systems shield writers and writing from code. To my mind, this is like shielding painters from wider color palettes, chefs from exotic ingredients, or sculptors from different types of tools.Leaning into the overlap between writing and coding gets us closer to one of the webs great joys: if you can imagine it, you can probably do it.

A couple of years ago, four JavaScript APIs that landed at the bottom of awareness in the State of JavaScript survey. I took an interest in those APIs because they have so much potential to be useful but dont get the credit they deserve. Even after a quick search, I was amazed at how many new web APIs have been added to the ECMAScript specification that arent getting their dues and with a lack of awareness and browser support in browsers.That situation can be a catch-22:An API is interesting but lacks awareness due to incomplete support, and there is no immediate need to support it due to low awareness.Most of these APIs are designed to power progressive web apps (PWA) and close the gap between web and native apps. Bear in mind that creating a PWA involves more than just adding a manifest file. Sure, its a PWA by definition, but it functions like a bookmark on your home screen in practice. In reality, we need several APIs to achieve a fully native app experience on the web. And the four APIs Id like to shed light on are part of that PWA puzzle that brings to the web what we once thought was only possible in native apps.You can see all these APIs in action in this demo as we go along.1. Screen Orientation APIThe Screen Orientation API can be used to sniff out the devices current orientation. Once we know whether a user is browsing in a portrait or landscape orientation, we can use it to enhance the UX for mobile devices by changing the UI accordingly. We can also use it to lock the screen in a certain position, which is useful for displaying videos and other full-screen elements that benefit from a wider viewport.Using the global screen object, you can access various properties the screen uses to render a page, including the screen.orientation object. It has two properties:type: The current screen orientation. It can be: "portrait-primary", "portrait-secondary", "landscape-primary", or "landscape-secondary".angle: The current screen orientation angle. It can be any number from 0 to 360 degrees, but its normally set in multiples of 90 degrees (e.g., 0, 90, 180, or 270).On mobile devices, if the angle is 0 degrees, the type is most often going to evaluate to "portrait" (vertical), but on desktop devices, it is typically "landscape" (horizontal). This makes the type property precise for knowing a devices true position.The screen.orientation object also has two methods:.lock(): This is an async method that takes a type value as an argument to lock the screen..unlock(): This method unlocks the screen to its default orientation.And lastly, screen.orientation counts with an "orientationchange" event to know when the orientation has changed.Browser SupportFinding And Locking Screen OrientationLets code a short demo using the Screen Orientation API to know the devices orientation and lock it in its current position.This can be our HTML boilerplate:<main> <p> Orientation Type: <span class="orientation-type"></span> <br /> Orientation Angle: <span class="orientation-angle"></span> </p> <button type="button" class="lock-button">Lock Screen</button> <button type="button" class="unlock-button">Unlock Screen</button> <button type="button" class="fullscreen-button">Go Full Screen</button></main>On the JavaScript side, we inject the screen orientation type and angle properties into our HTML.let currentOrientationType = document.querySelector(".orientation-type");let currentOrientationAngle = document.querySelector(".orientation-angle");currentOrientationType.textContent = screen.orientation.type;currentOrientationAngle.textContent = screen.orientation.angle;Now, we can see the devices orientation and angle properties. On my laptop, they are "landscape-primary" and 0.If we listen to the windows orientationchange event, we can see how the values are updated each time the screen rotates.window.addEventListener("orientationchange", () => { currentOrientationType.textContent = screen.orientation.type; currentOrientationAngle.textContent = screen.orientation.angle;});To lock the screen, we need to first be in full-screen mode, so we will use another extremely useful feature: the Fullscreen API. Nobody wants a webpage to pop into full-screen mode without their consent, so we need transient activation (i.e., a user click) from a DOM element to work.The Fullscreen API has two methods:Document.exitFullscreen() is used from the global document object,Element.requestFullscreen() makes the specified element and its descendants go full-screen.We want the entire page to be full-screen so we can invoke the method from the root element at the document.documentElement object:const fullscreenButton = document.querySelector(".fullscreen-button");fullscreenButton.addEventListener("click", async () => { // If it is already in full-screen, exit to normal view if (document.fullscreenElement) { await document.exitFullscreen(); } else { await document.documentElement.requestFullscreen(); }});Next, we can lock the screen in its current orientation:const lockButton = document.querySelector(".lock-button");lockButton.addEventListener("click", async () => { try { await screen.orientation.lock(screen.orientation.type); } catch (error) { console.error(error); }});And do the opposite with the unlock button:const unlockButton = document.querySelector(".unlock-button");unlockButton.addEventListener("click", () => { screen.orientation.unlock();});Cant We Check Orientation With a Media Query?Yes! We can indeed check page orientation via the orientation media feature in a CSS media query. However, media queries compute the current orientation by checking if the width is bigger than the height for landscape or smaller for portrait. By contrast,The Screen Orientation API checks for the screen rendering the page regardless of the viewport dimensions, making it resistant to inconsistencies that may crop up with page resizing.You may have noticed how PWAs like Instagram and X force the screen to be in portrait mode even when the native system orientation is unlocked. It is important to notice that this behavior isnt achieved through the Screen Orientation API, but by setting the orientation property on the manifest.json file to the desired orientation type.2. Device Orientation APIAnother API Id like to poke at is the Device Orientation API. It provides access to a devices gyroscope sensors to read the devices orientation in space; something used all the time in mobile apps, mainly games. The API makes this happen with a deviceorientation event that triggers each time the device moves. It has the following properties:event.alpha: Orientation along the Z-axis, ranging from 0 to 360 degrees.event.beta: Orientation along the X-axis, ranging from -180 to 180 degrees.event.gamma: Orientation along the Y-axis, ranging from -90 to 90 degrees.Browser SupportMoving Elements With Your DeviceIn this case, we will make a 3D cube with CSS that can be rotated with your device! The full instructions I used to make the initial CSS cube are credited to David DeSandro and can be found in his introduction to 3D transforms.To rotate the cube, we change its CSS transform properties according to the device orientation data:const currentAlpha = document.querySelector(".currentAlpha");const currentBeta = document.querySelector(".currentBeta");const currentGamma = document.querySelector(".currentGamma");const cube = document.querySelector(".cube");window.addEventListener("deviceorientation", (event) => { currentAlpha.textContent = event.alpha; currentBeta.textContent = event.beta; currentGamma.textContent = event.gamma; cube.style.transform = rotateX(${event.beta}deg) rotateY(${event.gamma}deg) rotateZ(${event.alpha}deg);});This is the result:3. Vibration APILets turn our attention to the Vibration API, which, unsurprisingly, allows access to a devices vibrating mechanism. This comes in handy when we need to alert users with in-app notifications, like when a process is finished or a message is received. That said, we have to use it sparingly; no one wants their phone blowing up with notifications.Theres just one method that the Vibration API gives us, and its all we need: navigator.vibrate().vibrate() is available globally from the navigator object and takes an argument for how long a vibration lasts in milliseconds. It can be either a number or an array of numbers representing a patron of vibrations and pauses.navigator.vibrate(200); // vibrate 200msnavigator.vibrate([200, 100, 200]); // vibrate 200ms, wait 100, and vibrate 200ms.Browser SupportVibration API DemoLets make a quick demo where the user inputs how many milliseconds they want their device to vibrate and buttons to start and stop the vibration, starting with the markup:<main> <form> <label for="milliseconds-input">Milliseconds:</label> <input type="number" id="milliseconds-input" value="0" /> </form> <button class="vibrate-button">Vibrate</button> <button class="stop-vibrate-button">Stop</button></main>Well add an event listener for a click and invoke the vibrate() method:const vibrateButton = document.querySelector(".vibrate-button");const millisecondsInput = document.querySelector("#milliseconds-input");vibrateButton.addEventListener("click", () => { navigator.vibrate(millisecondsInput.value);});To stop vibrating, we override the current vibration with a zero-millisecond vibration.const stopVibrateButton = document.querySelector(".stop-vibrate-button");stopVibrateButton.addEventListener("click", () => { navigator.vibrate(0);});4. Contact Picker APIIn the past, it used to be that only native apps could connect to a devices contacts. But now we have the fourth and final API I want to look at: the Contact Picker API.The API grants web apps access to the devices contact lists. Specifically, we get the contacts.select() async method available through the navigator object, which takes the following two arguments:properties: This is an array containing the information we want to fetch from a contact card, e.g., "name", "address", "email", "tel", and "icon".options: This is an object that can only contain the multiple boolean property to define whether or not the user can select one or multiple contacts at a time.Browser SupportIm afraid that browser support is next to zilch on this one, limited to Chrome Android, Samsung Internet, and Androids native web browser at the time Im writing this.Selecting Users ContactsWe will make another demo to select and display the users contacts on the page. Again, starting with the HTML:<main> <button class="get-contacts">Get Contacts</button> <p>Contacts:</p> <ul class="contact-list"> <!-- Well inject a list of contacts --> </ul></main>Then, in JavaScript, we first construct our elements from the DOM and choose which properties we want to pick from the contacts.const getContactsButton = document.querySelector(".get-contacts");const contactList = document.querySelector(".contact-list");const props = ["name", "tel", "icon"];const options = {multiple: true};Now, we asynchronously pick the contacts when the user clicks the getContactsButton.const getContacts = async () => { try { const contacts = await navigator.contacts.select(props, options); } catch (error) { console.error(error); }};getContactsButton.addEventListener("click", getContacts);Using DOM manipulation, we can then append a list item to each contact and an icon to the contactList element.const appendContacts = (contacts) => { contacts.forEach(({name, tel, icon}) => { const contactElement = document.createElement("li"); contactElement.innerText = ${name}: ${tel}; contactList.appendChild(contactElement); });};const getContacts = async () => { try { const contacts = await navigator.contacts.select(props, options); appendContacts(contacts); } catch (error) { console.error(error); }};getContactsButton.addEventListener("click", getContacts);Appending an image is a little tricky since we will need to convert it into a URL and append it for each item in the list.const getIcon = (icon) => { if (icon.length > 0) { const imageUrl = URL.createObjectURL(icon[0]); const imageElement = document.createElement("img"); imageElement.src = imageUrl; return imageElement; }};const appendContacts = (contacts) => { contacts.forEach(({name, tel, icon}) => { const contactElement = document.createElement("li"); contactElement.innerText = ${name}: ${tel}; contactList.appendChild(contactElement); const imageElement = getIcon(icon); contactElement.appendChild(imageElement); });};const getContacts = async () => { try { const contacts = await navigator.contacts.select(props, options); appendContacts(contacts); } catch (error) { console.error(error); }};getContactsButton.addEventListener("click", getContacts);And heres the outcome:Note: The Contact Picker API will only work if the context is secure, i.e., the page is served over https:// or wss:// URLs.ConclusionThere we go, four web APIs that I believe would empower us to build more useful and robust PWAs but have slipped under the radar for many of us. This is, of course, due to inconsistent browser support, so I hope this article can bring awareness to new APIs so we have a better chance to see them in future browser updates.Arent they interesting? We saw how much control we have with the orientation of a device and its screen as well as the level of access we get to access a devices hardware features, i.e. vibration, and information from other apps to use in our own UI.But as I said much earlier, theres a sort of infinite loop where a lack of awareness begets a lack of browser support. So, while the four APIs we covered are super interesting, your mileage will inevitably vary when it comes to using them in a production environment. Please tread cautiously and refer to Caniuse for the latest support information, or check for your own devices using WebAPI Check.

Many job openings in UX assume very specific roles with very specific skills. Product designers should be skilled in Figma. Researchers should know how to conduct surveys. UX writers must be able to communicate brand values.This article is part of our ongoing series on UX. You might want to take a look at Smart Interface Design Patterns and the upcoming live UX training as well. Use code BIRDIE to save 15% off.The Many Roles In UXSuccessful candidates must neatly fit within established roles and excel at tools and workflows that are perceived as the best practice in the industry from user needs to business needs and from the problem space to the solution space.There is nothing wrong with that, of course. However, many companies dont exactly know what expertise they actually need until they find the right person who actually has it. But too often, job openings dont allow for any flexibility unless the candidate checks off the right boxes.In fact, typically, UX roles have to fit into some of those rigorously defined and refined boxes:V-Shaped Designers Dont Fit Into BoxesJob openings typically cast a very restrictive frame for candidates. It comes with a long list of expectations and requirements, mostly aimed at T-shaped designers experts in one area of UX, with a high-level understanding of adjacent areas and perhaps a dash of expertise in business and operations.But as Brad Frost noted, people dont always fit squarely into a specific discipline. Their value comes not from staying within the boundaries of their roles but from intentionally crossing these boundaries. They are V-shaped experts in one or multiple areas, with a profound understanding and immense curiosity in adjacent areas.In practice, they excel at bridging the gaps and connecting the dots. They establish design KPIs and drive accessibility efforts. They streamline handoff and scale design systems. But to drive success, they need to rely on specialists, their T-shaped colleagues.Shaping Your Own BoxesI sincerely wish more companies would encourage their employees to shape their own boxes instead of defining confined boxes for them their own unique boxes of any form and shade and color and size employees desire, along with deliverables that other teams would benefit from and could build upon. Hiring? Maybe replace a long list of mandatory requirements with an open invitation to apply, even if its not a 100% match as long as a candidate believes they can do their best work for the job at hand. Seek a challenge? Dont feel restricted by your current role in a company. Explore where you drive the highest impact, shape this role, and suggest it. Searching for a job? Dont get discouraged if you dont tick all the boxes in a promising job opening. Apply! Just explain in fine detail what you bring to the table.Youve got this and good luck, everyone! Meet Smart Interface Design PatternsIf you are interested in UX and design patterns, take a look at Smart Interface Design Patterns, our 10h-video course with 100s of practical examples from real-life projects with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables with 5 new segments added every year. Jump to a free preview.Meet Smart Interface Design Patterns, our video course on interface design & UX.Jump to the video course100 design patterns & real-life examples.10h-video course + live UX training. Free preview.

Struggling to keep our inboxes under control and aim for that magical state of inbox zero, the notification announcing an incoming email isnt the most appreciated sound for many of us. However, there are some emails to actually look forward to: A newsletter, curated and written with love and care, can be a nice break in your daily routine, providing new insights and sparking ideas and inspiration for your work.With so many wonderful design newsletters out there, we know it can be a challenge to decide which newsletter (or newsletters) to subscribe to. Thats why we want to shine a light on some newsletter gems today to make your decision at least a bit easier and help you discover newsletters you might not have heard of yet. Ranging from design systems to UX writing, motion design, and user research, there sure is something in it for you.A huge thank you to everyone who writes, edits, and publishes these newsletters to help us all get better at our craft. You are truly smashing! Table of ContentsBelow youll find quick jumps to newsletters on specific topics you might be interested in. Scroll down to browse the complete list or skip the table of contents.AIbusinesscareercontent strategydesigndesign systemsethical designFigmafront-endinformation architectureinteraction designleadershipproduct designsustainabilityuser researchUXUX writingDesign & Front-EndHeyDesigner Delivered every Monday Written by Tamas SariAimed at product people, UXers, PMs, and design engineers, the HeyDesigner newsletter is packed with a carefully curated selection of the latest design and front-end articles, tools, and resources.Pixels of the Week Delivered weekly Written by Stphanie WalterStphanie Walters Pixels of the Week newsletter keeps you informed about the latest UX research, design, tech (HTML, CSS, SVG) news, tools, methods, and other resources that caught Stphanies interest.TLDR Design Delivered daily Written by Dan NiYoure looking for some bite-sized design inspiration? TLDR Design is a daily newsletter highlighting news, tools, tutorials, trends, and inspiration for design professionals.DesignOps Delivered every two weeks Written by Ch'an ArmstrongThe DesignOps newsletter provides the DesignOps community with the best hand-picked articles all around design, code, AI, design tools, no-code tools, developer tools, and, of course, design ops.Adam Silvers Newsletter Delivered weekly Written by Adam SilverEvery week, Adam Silver sends out a newsletter aimed at designers, content designers, and front-end developers. It includes short and sweet, evidence-based design tips, mostly about forms UX, but not always.Smashing Newsletter Delivered every Tuesday Written by the Smashing Editorial teamEvery Tuesday, we publish the Smashing Newsletter with useful tips and techniques on front-end and UX, covering everything from design systems and UX research to CSS and JavaScript. Each issue is curated, written, and edited with love and care, no third-party mailings or hidden advertising.UXUX Design Weekly Delivered every Monday Written by Kenny ChenUX Design Weekly provides you with a weekly dose of hand-picked user experience design links. Every issue features articles, tools and resources, a UX portfolio, and a quote to spark ideas and get you thinking.UX Collective Delivered weekly Written by Fabricio Teixeira and Caio BragaDesigners are thinkers as much as they are makers. Following this credo, the UX Collective newsletter helps designers think more critically about their work. Every issue highlights thought-provoking reads, little gems, tools, and resources.Built For Mars Delivered every few weeks Written by Peter RamseyThe Built for Mars newsletter brings Peter Ramseys UX research straight to your inbox. It includes in-depth UX case studies and bite-sized UX ideas and experiments.NN Group Delivered weekly Written by the Nielsen Norman GroupStudying users around the world, the Nielsen Norman Group provides research-based UX guidance. If you dont want to miss their latest articles and videos about usability, design, and UX research, you can subscribe to the NN/g newsletter to stay up-to-date.UX Notebook Delivered weekly Written by Sarah DoodyThe UX Notebook Newsletter is aimed at UX and product professionals who want to learn how to apply UX and design principles to design and grow their teams, products, and careers.Smart Interface Design Patterns Delivered weekly Written by Vitaly FriedmanEvery issue of the Smart Interface Design Patterns newsletter is dedicated to a common interface challenge and how to solve it to avoid issues down the line. A treasure chest of design patterns and UX techniques.UX Weekly Delivered weekly Written by the Interaction Design FoundationThe Interaction Design Foundation is known for their UX courses and webinars for both aspiring designers and advanced professionals. Their UX Weekly newsletter delivers design tips and educational material to help you leverage the power of design.Design With Care Delivered every first Tuesday of a month Written by Alex BilsteinHealthcare systems desparately need UX designers to improve the status quo for both healthcare professionals and patients. The Design With Care newsletter empowers UX designers to create better healthcare experiences and make an impact that matters.UX Writing & Content StrategyThe UX Gal Delivered every Monday Written by Slater KatzWhether youre about to start your UX content education or want to get better at UX writing, The UX Gal newsletter is for you. Every Monday, Slater Katz sends out a new newsletter with prompts, thoughts, and exercises to build your UX writing and content design skills.UX Content Collective Delivered weekly Written by the UX Content CollectiveThe newsletter by the UX Content Collective is perfect for anyone interested in content design. In it, youll find curated UX writing resources, new job openings, and exclusive discounts.GatherContent Delivered weekly Written by the GatherContent teamThe GatherContent newsletter is a weekly email full of content strategy goodies. It features articles, webinars and masterclasses, new books, free templates, and industry news.User ResearchUser Research Academy Delivered weekly Written by Nikki AndersonIf you want to get more creative and confident when conducting user research, the User Research Academy might be for you. With carefully curated articles, podcasts, events, books, and academic resources all around user research, the newsletter is perfect for beginners and senior UX researchers alike.User Weekly Delivered weekly Written by Jan AhrendWhat mattered in UX research this week? To keep you up-to-date on trends, methods, and insights across the UX research industry, Jan Ahrend captures the pulse of the UX research community in his User Weekly newsletter.User Interviews Delivered weekly Written by the User Interviews teamThe UX Research Newsletter by the folks at User Interviews delivers the latest UX research articles, reports, podcast episodes, and special features. For professional user researchers just like teams who need to conduct user research without a dedicated research team.Baymard Institute Delivered weekly Written by the Baymard InstituteUser experience, web design, and e-commerce are the topics which the Baymard Institute newsletter covers. It features ad-free full-length research articles to give you precious insights into the field.Interaction DesignDesign Spells Delivered every other Sunday Written by Chester How, Duncan Leo, and Rick LeeWhether its micro-interactions or easter eggs, Design Spells celebrates the design details that feel like magic and add a spark of delight to a design.Justin Volzs Newsletter Written by Justin VolzGetting you ready for the future of motion design is the goal of Justin Volzs newsletter. It features UX motion design trends, new UX motion design articles, and more to make your UI tap dance.Design Systems & FigmaDesign System Guide Delivered weekly Written by Romina KavcicAccompanying her interactive step-by-step guide to design systems, Romina Kavcic sends out the weekly Design System Guide newsletter on all things design systems, design process, and design strategy.Figmalion Delivered weekly Written by Eugene FedorenkoThe Figmalion newsletter keeps you up-to-date on what is happening in the Figma community, with curated design resources and a weekly roundup of Figma and design tool news.Information ArchitectureInforma(c)tion Delivered every other Sunday Written by Jorge ArangoThe Informa(c)tion newsletter explores the intersection of information, cognition, and design. Each issue includes an essay about information architecture and/or personal knowledge management and a list of interesting links.Product DesignProduct Design Challenges Delivered weekly Written by Artiom DashinskyHow about a weekly design challenge to work on your core design skills, improve your portfolio, or prepare for your next job interview? The Weekly Product Design Challenges newsletter has got you covered. Every week, Artiom Dashinsky shares a new exercise inspired and used by companies like Facebook, Google, and WeWork to interview UX design candidates.Fundament Delivered every other Thursday Written by Arkadiusz Radek and Mateusz LitarowiczWith Fundament, Arkadiusz Radek and Mateusz Litarowicz created a place to share what theyve learned in their ten-year UX and Product Design careers. The newsletter is about the things that matter in design, the practicalities of the job, the lesser-known bits, and content that will help you grow as a UX or Product Designer.Case Study Club Delivered weekly Written by Jan HaalandHow do people design digital products? With curated UX case studies, the Case Study Club newsletter grants insights into other designers processes.Ethical Design & SustainabilityEthical Design Network Delivered monthly Written by Trine FalbeThe Ethical Design Network is a space for digital professionals to share, discuss, and self-educate about ethical design. You can sign up to the newsletter to receive monthly news, resources, and event updates all around ethical design.Sustainable UX Delivered monthly Written by Thorsten JonasAs designers, we have to take responsibility for more than our users. Shining a light on how to design and build more sustainable digital products, the SUX Newsletter by the Sustainable UX Network helps you stand up to that responsibility.AIAI Goodies Delivered weekly Written by Ioana TeleanuA brand-new newsletter on AI, design, and UX goodies comes from Ioana Teleanu: AI Goodies. Every week, it covers the latest resources, trends, news, and tools from the world of AI.Businessd.MBA Delivered weekly Written by Alen FaljicLearning business can help you become a better designer. The d.MBA newsletter is your weekly source of briefings from the business world, hand-picked for the design community by Alen Faljic and the d.MBA team.Career & LeadershipDan Mall Teaches Delivered weekly Written by Dan MallTips, tricks, and tools about design systems, process, and leadership, delivered to your inbox every week. Thats the Dan Mall Teaches newsletter.Stratatics Delivered weekly Written by Ryan RumseyTo do things differently, you must look at your work in a new light. Thats the idea behind the Stratatics newsletter. Each week, Ryan Rumsey provides design leaders and executives (and those who work alongside them) with a new idea to reimagine and deliver their best work.Spread The WordDo you have a favorite newsletter that isnt featured in the post? Or maybe youre writing and publishing a newsletter yourself? Wed love to hear about it in the comments below!

Weve relied on media queries for a long time in the responsive world of CSS but they have their share of limitations and have shifted focus more towards accessibility than responsiveness alone. This is where CSS Container Queries come in. They completely change how we approach responsiveness, shifting the paradigm away from a viewport-based mentality to one that is more considerate of a components context, such as its size or inline-size.Querying elements by their dimensions is one of the two things that CSS Container Queries can do, and, in fact, we call these container size queries to help distinguish them from their ability to query against a components current styles. We call these container style queries.Existing container query coverage has been largely focused on container size queries, which enjoy 90% global browser support at the time of this writing. Style queries, on the other hand, are only available behind a feature flag in Chrome 111+ and Safari Technology Preview.The first question that comes to mind is What are these style query things? followed immediately by How do they work?. There are some nice primers on them that others have written, and they are worth checking out.But the more interesting question about CSS Container Style Queries might actually be Why we should use them? The answer, as always, is nuanced and could simply be it depends. But I want to poke at style queries a little more deeply, not at the syntax level, but what exactly they are solving and what sort of use cases we would find ourselves reaching for them in our work if and when they gain browser support.Why Container QueriesTalking purely about responsive design, media queries have simply fallen short in some aspects, but I think the main one is that they are context-agnostic in the sense that they only consider the viewport size when applying styles without involving the size or dimensions of an elements parent or the content it contains.This usually isnt a problem since we only have a main element that doesnt share space with others along the x-axis, so we can style our content depending on the viewports dimensions. However, if we stuff an element into a smaller parent and maintain the same viewport, the media query doesnt kick in when the content becomes cramped. This forces us to write and manage an entire set of media queries that target super-specific content breakpoints.Container queries break this limitation and allow us to query much more than the viewports dimensions.How Container Queries Generally WorkContainer size queries work similarly to media queries but allow us to apply styles depending on the containers properties and computed values. In short, they allow us to make style changes based on an elements computed width or height regardless of the viewport. This sort of thing was once only possible with JavaScript or the ol jQuery, as this example shows.As noted earlier, though, container queries can query an elements styles in addition to its dimensions. In other words, container style queries can look at and track an elements properties and apply styles to other elements when those properties meet certain conditions, such as when the elements background-color is set to hsl(0 50% 50%).Thats what we mean when talking about CSS Container Style Queries. Its a proposed feature defined in the same CSS Containment Module Level 3 specification as CSS Container Size Queries and one thats currently unsupported by any major browser so the difference between style and size queries can get a bit confusing as were technically talking about two related features under the same umbrella.Wed do ourselves a favor to backtrack and first understand what a container is in the first place.ContainersAn elements container is any ancestor with a containment context; it could be the elements direct parent or perhaps a grandparent or great-grandparent.A containment context means that a certain element can be used as a container for querying. Unofficially, you can say there are two types of containment context: size containment and style containment.Size containment means we can query and track an elements dimensions (i.e., aspect-ratio, block-size, height, inline-size, orientation, and width) with container size queries as long as its registered as a container. Tracking an elements dimensions requires a little processing in the client. One or two elements are a breeze, but if we had to constantly track the dimensions of all elements including resizing, scrolling, animations, and so on it would be a huge performance hit. Thats why no element has size containment by default, and we have to manually register a size query with the CSS container-type property when we need it.On the other hand, style containment lets us query and track the computed values of a containers specific properties through container style queries. As it currently stands, we can only check for custom properties, e.g. --theme: dark, but soon we could check for an elements computed background-color and display property values. Unlike size containment, we are checking for raw style properties before they are processed by the browser, alleviating performance and allowing all elements to have style containment by default.Did you catch that? While size containment is something we manually register on an element, style containment is the default behavior of all elements. Theres no need to register a style container because all elements are style containers by default.And how do we register a containment context? The easiest way is to use the container-type property. The container-type property will give an element a containment context and its three accepted values normal, size, and inline-size define which properties we can query from the container./* Size containment in the inline direction */.parent { container-type: inline-size;}This example formally establishes a size containment. If we had done nothing at all, the .parent element is already a container with a style containment.Size ContainmentThat last example illustrates size containment based on the elements inline-size, which is a fancy way of saying its width. When we talk about normal document flow on the web, were talking about elements that flow in an inline direction and a block direction that corresponds to width and height, respectively, in a horizontal writing mode. If we were to rotate the writing mode so that it is vertical, then inline would refer to the height instead and block to the width.Consider the following HTML:<div class="cards-container"> <ul class="cards"> <li class="card"></li> </ul></div>We could give the .cards-container element a containment context in the inline direction, allowing us to make changes to its descendants when its width becomes too small to properly display everything in the current layout. We keep the same syntax as in a normal media query but swap @media for @container.cards-container { container-type: inline-size; } @container (width < 700px) { .cards { background-color: red; }}Container syntax works almost the same as media queries, so we can use the and, or, and not operators to chain different queries together to match multiple conditions.@container (width < 700px) or (width > 1200px) { .cards { background-color: red; }}Elements in a size query look for the closest ancestor with size containment so we can apply changes to elements deeper in the DOM, like the .card element in our earlier example. If there is no size containment context, then the @container at-rule wont have any effect./* * Apply styles based on the closest container, .cards-container */@container (width < 700px) { .card { background-color: black; }}Just looking for the closest container is messy, so its good practice to name containers using the container-name property and then specifying which container were tracking in the container query just after the @container at-rule..cards-container { container-name: cardsContainer; container-type: inline-size;}@container cardsContainer (width < 700px) { .card { background-color: #000; }}We can use the shorthand container property to set the container name and type in a single declaration:.cards-container { container: cardsContainer / inline-size; /* Equivalent to: */ container-name: cardsContainer; container-type: inline-size;}The other container-type we can set is size, which works exactly like inline-size only the containment context is both the inline and block directions. That means we can also query the containers height sizing in addition to its width sizing./* When container is less than 700px wide */@container (width < 700px) { .card { background-color: black; }}/* When container is less than 900px tall */@container (height < 900px) { .card { background-color: white; }}And its worth noting here that if two separate (not chained) container rules match, the most specific selector wins, true to how the CSS Cascade works.So far, weve touched on the concept of CSS Container Queries at its most basic. We define the type of containment we want on an element (we looked specifically at size containment) and then query that container accordingly.Container Style QueriesThe third value that is accepted by the container-type property is normal, and it sets style containment on an element. Both inline-size and size are stable across all major browsers, but normal is newer and only has modest support at the moment.I consider normal a bit of an oddball because we dont have to explicitly declare it on an element since all elements are style containers with style containment right out of the box. Its possible youll never write it out yourself or see it in the wild..parent { /* Unnecessary */ container-type: normal;}If you do write it or see it, its likely to undo size containment declared somewhere else. But even then, its possible to reset containment with the global initial or revert keywords..parent { /* All of these (re)set style containment */ container-type: normal; container-type: initial; container-type: revert;}Lets look at a simple and somewhat contrived example to get the point across. We can define a custom property in a container, say a --theme..cards-container { --theme: dark;}From here, we can check if the container has that desired property and, if it does, apply styles to its descendant elements. We cant directly style the container since it could unleash an infinite loop of changing the styles and querying the styles..cards-container { --theme: dark;}@container style(--theme: dark) { .cards { background-color: black; }}See that style() function? In the future, we may want to check if an element has a max-width: 400px through a style query instead of checking if the elements computed value is bigger than 400px in a size query. Thats why we use the style() wrapper to differentiate style queries from size queries./* Size query */@container (width > 60ch) { .cards { flex-direction: column; }}/* Style query */@container style(--theme: dark) { .cards { background-color: black; }}Both types of container queries look for the closest ancestor with a corresponding containment-type. In a style() query, it will always be the parent since all elements have style containment by default. In this case, the direct parent of the .cards element in our ongoing example is the .cards-container element. If we want to query non-direct parents, we will need the container-name property to differentiate between containers when making a query..cards-container { container-name: cardsContainer; --theme: dark;}@container cardsContainer style(--theme: dark) { .card { color: white; }}Weird and Confusing Things About Container Style QueriesStyle queries are completely new and bring something never seen in CSS, so they are bound to have some confusing qualities as we wrap our heads around them some that are completely intentional and well thought-out and some that are perhaps unintentional and may be updated in future versions of the specification.Style and Size Containment Arent Mutually ExclusiveOne intentional perk, for example, is that a container can have both size and style containment. No one would fault you for expecting that size and style containment are mutually exclusive concerns, so setting an element to something like container-type: inline-size would make all style queries useless.However, another funny thing about container queries is that elements have style containment by default, and there isnt really a way to remove it. Check out this next example:.cards-container { container-type: inline-size; --theme: dark;}@container style(--theme: dark) { .card { background-color: black; }}@container (width < 700px) { .card { background-color: red; }}See that? We can still query the elements by style even when we explicitly set the container-type to inline-size. This seems contradictory at first, but it does make sense, considering that style and size queries are computed independently. Its better this way since both queries dont necessarily conflict with each other; a style query could change the colors in an element depending on a custom property, while a container query changes an elements flex-direction when it gets too small for its contents.But We Can Achieve the Same Thing With CSS Classes and IDsMost container query guides and tutorials Ive seen use similar examples to demonstrate the general concept, but I cant stop thinking no matter how cool style queries are, we can achieve the same result using classes or IDs and with less boilerplate. Instead of passing the state as an inline style, we could simply add it as a class.<ol> <li class="item first"> <img src="..." alt="Roi's avatar" /> <h2>Roi</h2> </li> <li class="item second"><!-- etc. --></li> <li class="item third"><!-- etc. --></li> <li class="item"><!-- etc. --></li> <li class="item"><!-- etc. --></li></ol>Alternatively, we could add the position number directly inside an id so we dont have to convert the number into a string:<ol> <li class="item" id="item-1"> <img src="..." alt="Roi's avatar" /> <h2>Roi</h2> </li> <li class="item" id="item-2"><!-- etc. --></li> <li class="item" id="item-3"><!-- etc. --></li> <li class="item" id="item-4"><!-- etc. --></li> <li class="item" id="item-5"><!-- etc. --></li></ol>Both of these approaches leave us with cleaner HTML than the container queries approach. With style queries, we have to wrap our elements inside a container even if we dont semantically need it because of the fact that containers (rightly) are unable to style themselves.We also have less boilerplate-y code on the CSS side:#item-1 { background: linear-gradient(45deg, yellow, orange); }#item-2 { background: linear-gradient(45deg, grey, white);}#item-3 { background: linear-gradient(45deg, brown, peru);}See the Pen Style Queries Use Case Replaced with Classes [forked] by Monknow.As an aside, I know that using IDs as styling hooks is often viewed as a no-no, but thats only because IDs must be unique in the sense that no two instances of the same ID are on the page at the same time. In this instance, there will never be more than one first-place, second-place, or third-place player on the page, making IDs a safe and appropriate choice in this situation. But, yes, we could also use some other type of selector, say a data-* attribute.There is something that could add a lot of value to style queries: a range syntax for querying styles. This is an open feature that Miriam Suzanne proposed in 2023, the idea being that it queries numerical values using range comparisons just like size queries.Imagine if we wanted to apply a light purple background color to the rest of the top ten players in the leaderboard example. Instead of adding a query for each position from four to ten, we could add a query that checks a range of values. The syntax is obviously not in the spec at this time, but lets say it looks something like this just to push the point across:/* Do not try this at home! */@container leaderboard style(4 >= --position <= 10) { .item { background: linear-gradient(45deg, purple, fuchsia); }}In this fictional and hypothetical example, were:Tracking a container called leaderboard,Making a style() query against the container,Evaluating the --position custom property,Looking for a condition where the custom property is set to a value equal to a number that is greater than or equal to 4 and less than or equal to 10.If the custom property is a value within that range, we set a players background color to a linear-gradient() that goes from purple to fuschia.This is very cool, but if this kind of behavior is likely to be done using components in modern frameworks, like React or Vue, we could also set up a range in JavaScript and toggle on a .top-ten class when the condition is met.See the Pen Style Ranged Queries Use Case Replaced with Classes [forked] by Monknow.Sure, its great to see that we can do this sort of thing directly in CSS, but its also something with an existing well-established solution.Separating Style Logic From Logic LogicSo far, style queries dont seem to be the most convenient solution for the leaderboard use case we looked at, but I wouldnt deem them useless solely because we can achieve the same thing with JavaScript. I am a big advocate of reaching for JavaScript only when necessary and only in sprinkles, but style queries, the ones where we can only check for custom properties, are most likely to be useful when paired with a UI framework where we can easily reach for JavaScript within a component. I have been using Astro an awful lot lately, and in that context, I dont see why I would choose a style query over programmatically changing a class or ID.However, a case can be made that implementing style logic inside a component is messy. Maybe we should keep the logic regarding styles in the CSS away from the rest of the logic logic, i.e., the stateful changes inside a component like conditional rendering or functions like useState and useEffect in React. The style logic would be the conditional checks we do to add or remove class names or IDs in order to change styles.If we backtrack to our leaderboard example, checking a players position to apply different styles would be style logic. We could indeed check that a players leaderboard position is between four and ten using JavaScript to programmatically add a .top-ten class, but it would mean leaking our style logic into our component. In React (for familiarity, but it would be similar to other frameworks), the component may look like this:const LeaderboardItem = ({position}) => { <li className={item ${position >= 4 && position <= 10 ? "top-ten" : ""}} id={item-${position}}> <img src="..." alt="Roi's avatar" /> <h2>Roi</h2> </li>;};Besides this being ugly-looking code, adding the style logic in JSX can get messy. Meanwhile, style queries can pass the --position value to the styles and handle the logic directly in the CSS where it is being used.const LeaderboardItem = ({position}) => { <li className="item" style={{"--position": position}}> <img src="..." alt="Roi's avatar" /> <h2>Roi</h2> </li>;};Much cleaner, and I think this is closer to the value proposition of style queries. But at the same time, this example makes a large leap of assumption that we will get a range syntax for style queries at some point, which is not a done deal.ConclusionThere are lots of teams working on making modern CSS better, and not all features have to be groundbreaking miraculous additions.Size queries are definitely an upgrade from media queries for responsive design, but style queries appear to be more of a solution looking for a problem.It simply doesnt solve any specific issue or is better enough to replace other approaches, at least as far as I am aware.Even if, in the future, style queries will be able to check for any property, that introduces a whole new can of worms where styles are capable of reacting to other styles. This seems exciting at first, but I cant shake the feeling it would be unnecessary and even chaotic: styles reacting to styles, reacting to styles, and so on with an unnecessary side of boilerplate. Id argue that a more prudent approach is to write all your styles declaratively together in one place.Maybe it would be useful for web extensions (like Dark Reader) so they can better check styles in third-party websites? I cant clearly see it. If you have any suggestions on how CSS Container Style Queries can be used to write better CSS that I may have overlooked, please let me know in the comments! Id love to know how youre thinking about them and the sorts of ways you imagine yourself using them in your work.

Why do we see login forms split into multiple screens everywhere? Instead of typing email and password, we have to type email, move to the next page, and then type password there. This seems to be inefficient, to say the least.Lets see why login forms are split across screens, what problem they solve, and how to design a better experience for better authentication UX (video).This article is part of our ongoing series on design patterns. Its also an upcoming part of the 10h-video library on Smart Interface Design Patterns and the upcoming live UX training as well. Use code BIRDIE to save 15% off.The Problem With Login FormsIf there is one thing weve learned over the years in UX, its that designing for people is hard. This applies to login forms as well. People are remarkably forgetful. They often forget what email they signed up with or what service they signed in with last time (Google, Twitter, Apple, and so on)One idea is to remind customers what they signed in with last time and perhaps make it a default option. However, it reveals directly what the users account was, which might be a privacy or security issue:What if instead of showing all options to all customers all the time, we ask for email first, and then look up what service they used last time, and redirect customers to the right place automatically? Well, thats exactly the idea behind 2-page logins.Meet 2-Page-LoginsYou might have seen them already. If a few years ago, most login forms asked for email and password on one page, these days its more common to ask only for email first. When the user chooses to continue, the form will ask for a password in a separate step. Brad explores some problems of this pattern.A common reason for splitting the login form across pages is Single Sign-On (SSO) authentication. Large companies typically use SSO for corporate sign-ins of their employees. With it, employees log in only once every day and use only one set of credentials, which improves enterprise security.The UX Intricacies of Single Sign-On (SSO)SSO also helps with regulatory compliance, and its much easier to provision users with appropriate permissions and revoke them later at once. So, if an employee leaves, all their accounts and data can be deleted at once.To support both business customers and private customers, companies use 2-step-login. Users need to type in their email first, then the validator checks what provider the email is associated with and redirects users there.Users rarely love this experience. Sometimes, they have multiple accounts (private and business) with one service. Also, 2-step-logins often break autofill and password managers. And for most users, login/pass is way faster than 2-step-login.Of course, typically, there are dedicated corporate login pages for employees to sign in, but they often head directly to Gmail, Figma, and so on instead and try to sign in there. However, they wont be able to log in as they must sign in through SSO.Bottom line: the pattern works well for SSO users, but for non-SSO users, it results in a frustrating UX.Alternative Solution: Conditional Reveal of SSOThere is a way to work around these challenges (see the image below). We could use a single-page look-up with email and password input fields as a default. Once a user has typed in their email, we detect if the SSO authentication is enabled.If Single Sign-On (SSO) is enabled for that email, we show a Single Sign-On option and default to it. We could also make the password field optional or disabled.If SSO isnt enabled for that email, we proceed with the regular email/password login. This is not much hassle, but it saves trouble for both private and business accounts.Key Takeaways People often forget what email they signed up with. They also forget the auth service they signed in with. Companies use Single Sign-On (SSO) for corporate sign-in. Individual accounts still need email and password for login. 2-step login: ask for email, then redirect to the right service. 2-step-login replaces social sign-in for repeat users. It directs users rather than giving them roadblocks. Users still keep forgetting the email they signed in with. Sometimes, users have multiple accounts with one service. 2-step logins often break autofill and password managers. For most users, login/pass is way faster than 2-step-login. Better: start with one single page with login and password. As users type their email, detect if SSO is enabled for them. If it is, reveal an SSO-login option and set a default to it. Otherwise, proceed with the regular password login. If users must use SSO, disable the password field dont hide it.Wrapping UpPersonally, I havent tested the approach, but it might be a good alternative to 2-page logins both for SSO and non-SSO users. Keep in mind, though, that SSO authentication might or might not require a password, as sometimes login happens via Yubikey or Touch-ID or third parties (e.g., OAuth).Also, eventually, users will be locked out; its just a matter of time. So, do use magic links for password recovery or access recovery, but dont mandate it as a regular login option. Switching between applications is slow and causes mistakes. Instead, nudge users to enable 2FA: its both usable and secure.And most importantly, test your login flow with the tools that your customers rely on. You might be surprised how broken their experience is if they rely on password managers or security tools to log in. Good luck, everyone!Useful ResourcesWhen To Use A Two-Page Login, by Josh WayneDont Get Clever With Login Forms, by Brad FrostWhy Are Email And Password On Two Different Pages?, by Kelley R.Six Simple Steps To Better Authentication UX, by yours trulyMeet Smart Interface Design PatternsIf you are interested in similar insights around UX, take a look at Smart Interface Design Patterns, our 10h-video course with 100s of practical examples from real-life projects with a live UX training later this year. Everything from mega-dropdowns to complex enterprise tables with 5 new segments added every year. Jump to a free preview.Meet Smart Interface Design Patterns, our video course on interface design & UX.Jump to the video course100 design patterns & real-life examples.10h-video course + live UX training. Free preview.

Imagine that you could smell this page. The introduction would emit a subtle scent of sage and lavender to set the mood. Each paragraph would fill your room with the coconut oil aroma, helping you concentrate and immerse in reading. The fragrance of the comments section, resembling a busy farmers market, would nudge you to share your thoughts and debate with strangers. How would the presence of smells change your experience reading this text or influence your takeaways?Scents are everywhere. They fill our spaces, bind our senses to objects and people, alert us to dangers, and arouse us. Smells have so much influence over our mood and behavior that hundreds of companies are busy designing fragrances for retail, enticing visitors to purchase more, hotels, making customers feel at home, and amusement parks, evoking a warm sense of nostalgia.At the same time, the digital world, where we spend our lives working, studying, shopping, and resting, remains entirely odorless. Our smart devices are not designed to emit or recognize scents, and every corner of the Internet, including this page, smells exactly the same. We watch movies, play games, study, and order dinner, but our sense of smell is left unengaged. The lack of odors rarely bothers us, but occasionally, we choose analog things like books merely because their digital counterparts fail to connect with us at the same level. Could the presence of smells improve our digital experiences? What would it take to build the smelly Internet, and why hasn't it been done before? Last but not least, what power do scents hold over our senses, memory, and health, and how could we harness it for the digital world? Lets dive deep into a fascinating and underexplored realm of odors. Olfactory Design For The Real WorldWhy Do We Remember Smells?In his novel In Search of Lost Time, French writer Marcel Proust describes a sense of dj vu he experienced after tasting a piece of cake dipped in tea: Immediately the old gray house upon the street rose up like a stage set the house, the town, the square where I was sent before lunch, the streets along which I used to run errands, the country roads we took the whole of Combray and of its surroundings sprang into being, town and gardens alike, all from my cup of tea. Marcel ProustThe Proust Effect, the phenomenon of an involuntary memory evoked by scents, is a common occurrence. It explains how the presence of a familiar smell activates areas in our brain responsible for odor recognition, causing us to experience a strong, warm, positive sense of nostalgia. Smells have a potent and almost magical impact on our ability to remember and recognize objects and events. The nose makes the eyes remember, as a renowned Finnish architect Juhani Pallasmaa puts it: a single droplet of a familiar fragrance is often enough to bring up a wild cocktail of emotions and recollections, even those that have long been forgotten.A memory of a place, a person, or an experience is often a memory of their smell that lingers long after the odor is gone. J. Douglas Porteous, Professor of Geography at the University of Victoria, coined the term Smellscape to describe how a collective of smells in each particular area form our perception, define our attitude, and craft our recollection of it. To put it simply, we choose to avoid beautiful places and forget delicious meals when their odors are not to our liking. Pleasant aromas, on the other hand, alter our memory, make us overlook flaws and defects, or even fall in love. With such an immense power that scents hold over our perception of reality, it comes as no surprise they have long become a tool in the hands of brand and service designers. Scented AdvertisingWhat do a luxury car brand, a cosmetics store, and a carnival ride have in common? The answer is that they all have their own distinct scents.Carefully crafted fragrances are widely used to create brand identities, make powerful impressions, and differentiate brands emotionally and memorably. Some choose to complement visual identities with subtle, tailored aromas. 12.29, a creative olfactive branding company, developed the scent identity for Cadillac, a symbol of self-expression representing the irrepressible pursuit of life. The branded Cadillac scent is diffused in dealerships and auto shows around the world, evoking a sense of luxury and class. Customers are expected to remember Cadillac better for its signature nutty coffee, dark leather, and resinous amber notes, forging a strong emotional connection with the brand. Next time they think of Cadillac, their brain will recall its signature fragrance and the way it made them feel. Cadillac is ready to bet they will not even consider other brands afterwards.Others may be less subtle and employ more aggressive, fragrant marketing tactics. LUSH, a British cosmetics retailer, is known for its distinct smells. Although even the company co-founder admits that odors can be overwhelming for some, LUSHs scents play an important role in crafting the brands identity.Indeed, the aroma of their stores is so recognizable that it lures customers in from afar with ease, and few walk away without forever remembering the brands distinct smell.However, retail is not the only area that employs discernible smells. Disney takes a holistic approach to service design, carefully considering every aspect that influences customer satisfaction. Smells have long been a part of the signature Disney experience: the main street smells like pastry and popcorn, Spaceship Earth is filled with the burning wood aroma, and Soarin is accompanied by notes of orange and pine.Dozens of scent-emitting devices, Smellitzers, are responsible for adding scents to each experience. Deployed around each park and perfectly synced with every other sensory stimulus, they shoot scents toward passersby and trigger memories of childhood nostalgia. As shown in the patent, Smellitzer is a rather simple odor delivery system designed to enhance the sense of flight created in the minds of the passengers. Scents are carefully curated and manufactured to evoke precise emotions without disrupting the ride experience.Disneys attractions, lanes, and theaters are packed with smell-emitting gadgets that distribute sweet and savoury notes. The visitors barely notice the presence of added scents, but later inevitably experience a sudden but persistent urge to return to the park. Could it be something in the air, perhaps?Well-curated, timely delivered, recognizable scents can be a powerful ally in the hands of a designer.They can soothe a passenger during a long flight with the subtle notes of chamomile and mint or seduce a hungry shopper with the familiar aroma of freshly baked cinnamon buns. Scents can create and evoke great memories, amplify positive emotions, or turn casual buyers into eager and loyal consumers.Unfortunately, smells can also ruin otherwise decent experiences.Scented EntertainmentWhy Fragrant Cinema FailedIn 1912, Aldous Huxley, author of the dystopian novel Brave New World, published an essay Silence is Golden, reflecting on his first experience watching a sound film. Huxley despised cinema, calling it the most frightful creation-saving device for the production of standardized amusement, and the addition of sound made the writer concerned for the future of entertainment. Films engaged multiple senses but demanded no intellectual involvement, becoming more accessible, more immersive, and, as Huxley feared, more influential. Brave New World, published in 1932, features the cinema of the future a multisensory entertainment complex designed to distract society from seeking a deeper sense of purpose in life. Attendees enjoy a scent organ playing a delightfully refreshing Herbal Capriccio rippling arpeggios of thyme and lavender, of rosemary, basil, myrtle, tarragon, and get to experience every physical stimulation imaginable.Huxleys critical take on the state of the entertainment industry was spot-on. Obsessed with the idea of multisensory entertainment, studios did not take long to begin investing in immersive experiences. The 1950s were the age of experiments designed to attract more viewers: colored cinema, 3D films, and, of course, scented movies.In 1960, two films hit the American theaters: Scent of Mystery, accompanied by the odor-delivery technology called SmellOVision, and Behind the Great Wall, employing the process named AromaRama. SmellOVision was designed to transport scents through tubes to each seat, much like Disneys Smellitzers, whereas AromaRama distributed smells through the theaters ventilation. Both scented movies were panned by critics and viewers alike. In his review for the New York Times, Bosley Crowther wrote that ...synthetic smells [...] occasionally befit what one is viewing, but more often they confuse the atmosphere. Audiences complained about smells being either too subtle or too overpowering and the machines disrupting the viewing experience. The groundbreaking technologies were soon forgotten, and all plans to release more scented films were scrapped. Why did odors, so efficient at manufacturing nostalgic memories of an amusement park, fail to entertain the audience at the movies? On the one hand, it may attributed to the technological limitations of the time. For instance, AromaRama diffused the smells into the ventilation, which significantly delayed the delivery and required scents to be removed between scenes. Suffice it to say the viewers did not enjoy the experience.However, there could be other possible explanations.First of all, digital entertainment is traditionally odorless. Viewers do not anticipate movies to be accompanied by smells, and their brains are conditioned to ignore them. Researchers call it inattentional anosmia: people connect their enjoyment with what they see on the screen, not what they smell or taste. Moreover, background odors tend to fade and become less pronounced with time. A short exposure to a pleasant odor may be complimentary. For instance, viewers could smell orange as the character in Behind the Great Wall cut and squeezed the fruit: an impressive moment, as admitted by critics. However, left to linger, even the most pleasant scents can leave the viewer uninvolved or irritated. Finally, cinema does not require active sensory involvement. Viewers sit still in silence, rarely even moving their heads, while their sight and hearing are busy consuming and interpreting the information. Immersion requires suspension of disbelief: well-crafted films force the viewer to forget the reality around them, but the addition of scents may disrupt this state, especially if scents are not relevant or well-crafted. For the scented movie to engage the audience, smells must be integrated into the films events and play an important role in the viewing experience. Their delivery must be impeccable: discreet, smooth, and perfectly timed. In time, perhaps, we may see the revival of scented cinema. Until then, rare auteur experiments and 4Dcinema booths at carnivals will remain the only places where fragrant films will live on.Fortunately, the lessons from the early experiments helped others pave the way for the future of fragrant entertainment. Immersive GamingUnlike movies, video games require active participation. Players are involved in crafting the narrative of the game and, as such, may expect (and appreciate) a higher degree of realism. Virtual Reality is a good example of technology designed for full sensory stimulation.Modern headsets are impressive, but several companies are already working hard on the next-gen tech for immersive gaming. Meta and Manus are developing gloves that make virtual elements tangible. Teslasuit built a full-body suit that captures motion and biometry, provides haptic feedback, and emulates sensations for objects in virtual reality. We may be just a few steps away from virtual multi-sensory entertainment being as widespread as mobile phones. Scents are coming to VR, too, albeit at a slower pace, with a few companies already selling devices for fragrant entertainment. For instance, GameScent has developed a cube that can distribute up to 8 smells, from gunfire and explosion to forest and storm, using AI to sync the odors with the events in the game. The vast majority of experiments, however, occur in the labs, where researchers attempt to understand how smells impact gamers and test various concepts. Some assign smells to locations in a VR game and distribute them to players; others have the participants use a hand-held device to smell objects in the game. The majority of studies demonstrate promising results. The addition of fragrances creates a deeper sense of immersion and enhances realism in virtual reality and in a traditional gaming setting.A notable example of the latter is Tainted, an immersive game based on South-East Asian folklore, developed by researchers in 2017. The objective of the game is to discover and burn banana trees, where the main antagonist of the story a mythical vengeful spirit named Pontianak is traditionally believed to hide. The way Tainted incorporates smells into the gameplay is quite unique. A scent-emitting module, placed in front of the player, diffuses fragrances to complement the narrative. For instance, the smell of banana signals the ghosts presence, whereas pineapple aroma means that a flammable object required to complete the quest is nearby. Odors inform the player of dangers, give directions, and become an integral part of the gaming experience, like visuals and sound.Some of the most creative examples of scented learning come from places that combine education and entertainment, most notably, museums.Jorvik Viking Centre is famous for its use of smells of Viking-age York to capture the unique atmosphere of the past. Its scented halls, holograms, and entertainment programs turn a former archeological site into a carnival ride that teleports visitors into the 10th century to immerse them into the daily life of the Vikings. Authentic smells are the centers distinct feature, an integral part of its branding and marketing, and an important addition to its collection. Smells are responsible for making Jorvik exhibitions so memorable, and hopefully, for visitors walking away with a few Viking trivia facts firmly stuck in their heads.At the same time, learning is becoming increasingly more digital, from mobile apps for foreign languages to student portals and online universities. Smart devices strive to replace classrooms with their analog textbooks, papers, gel pens, and teachers. Virtual Reality is a step towards the future of immersive digital education, and odors may play a more significant role in making it even more efficient. Education will undoubtedly continue leveraging the achievements of the digital revolution to complement its existing tools. Tablets and Kindles are on their way to replace textbooks and pens. Phones are no longer deemed a harmful distraction that causes brain cancer. Odors, in turn, are becoming learning supplements. Teachers and parents have access to personalized diffusers that distribute the smell of peppermint to enhance students attention. Large scent-emitting devices for educational facilities are available on the market, too.At the same time, inspired to figure out the way to upload knowledge straight into our brains, weve discovered a way to learn things in our sleep using smells. Several studies have shown that exposure to scents during sleep significantly improves cognitive abilities and memory. More than that, smells can activate our memory while we sleep and solidify what we have learnt while awake.Odors may not replace textbooks and lectures, but their addition will make remembering and recalling things significantly easier. In fact, researchers from MIT built and tested a wearable scent-emitting device that can be used for targeted memory reactivation.In time, we will undoubtedly see more smart devices that make use of scents for memory enhancement, training, and entertainment. Integrated into the ecosystems of gadgets, olfactory wearables and smart home appliances will improve our well-being, increase productivity, and even detect early symptoms of illnesses.There is, however, a caveat.The Challenging UX Of ScentsWe know very little about smells. Until 2004, when Richard Axel and Linda Buck received a Nobel Prize for identifying the genes that control odor receptors, we didnt even know how our bodies processed smells or that different areas in our brains were activated by different odors. We know that our experience with smells is deep and intimate, from the memories they create to the emotions they evoke. We are aware that unpleasant scents linger longer and have a stronger impact on our mental state and memory. Finally, we understand that intensity, context, and delivery matter as much as the scent itself and that a decent aroma diffused out of place ruins the experience. Thus, if we wish to build devices that make the best use of scents, we need to follow a few simple principles. Design Principle #1: Tailor The Scents To Each UserIn his article about Smellscapes, J. Douglas Porteous writes:The smell of a certain institutional soap may carry a person back to the purgatory of boarding school. A particular floral fragrance reminds one of a lost love. A gust of odour from an ethnic spice emporium may waft one back, in memory, to Calcutta. J. Douglas PorteousSmells revive hidden memories and evoke strong emotions, but their connection to our minds is deeply personal. A rich, spicy aroma of freshly roasted coffee beans will not have the same impact on different people, and in order to use scents in learning, we need to tailor the experience to each user.In order to maximize the potential of odors in immersion and learning, we need to understand which smells have the most impact on the user. By filtering out the smells that the user finds unpleasant or associates with sad events in their past, we can reduce any potential negative effect on their wellness or memory.Design Principle #2: Stick To The Simpler SmellsHumans are notoriously bad at describing odors.Very few languages in the world feature specific terms for smells. For instance, the speakers of Jahai, a language in Malaysia, enjoy the privilege of having specific names for scents like bloody smell that attracts tigers and wild mango, wild ginger roots, bat caves, and petrol. English, on the other hand, often uses adjectives associated with flavor (smoky vanilla) or comparison (smells like orange) to describe scents. For centuries, we have been trying to work out a system that could help cluster odors. Aristotle classified all odors into six groups: sweet, acid, severe, fatty, sour, and fetid (unpleasant). Carl Linnaeus expanded it to 7 types: aromatic, fragrant, alliaceous (garlic), ambrosial (musky), hircinous (goaty), repulsive, and nauseous. Hans Henning arranged all scent groups in a prism. None of the existing classifications, however, help accurately describe complex smells, which inevitably makes it harder to recreate them.Academics have developed several comprehensive lists, for instance, the Odor Character Profiling that contains 146 unique descriptors. Pleasant smells from the list are easier to reproduce than unique and sophisticated odors. Although an aroma of the warm touch of an early summer sun may work better for a particular user than the smell of an apple pie, the high price of getting the scent wrong makes it a reasonable trade-off. Design Principle #3: Ensure Stable And Convenient DeliveryNothing can ruin a good olfactory experience more than an imperfect delivery system.Disneys Smellitzers and Jorviks scented exhibition set the standard for discreet, contextual, and consistent inclusion of smells to complement the experience. Their diffusers are well-concealed, and odors do not come off as overwhelming or out of place. On the other hand, the failure of scented movies from the 1950s can at least partially be attributed to poorly designed aroma delivery systems. Critics remembered that even the purifying treatment that was used to clear the theater air between scenes left a sticky, sweet and upsetting smell. Good delivery systems are often simple and focus on augmenting the experience without disrupting it. For instance, eScent, a scent-enhanced FFP3 mask, is engineered to reduce stress and improve the well-being of frontline workers. The mask features a slot for applicators infused with essential oil; users can choose fragrances and swap the applicator whenever they want. Beside that, eScent is no different from its analog predecessor: it does not require special equipment or preparation, and the addition of smells does not alter the experience of wearing a mask.In The Not Too Distant FutureWe may know little about smells, but we are steadily getting closer to harnessing their power. In 2022, Alex Wiltschko, a former Google staff research scientist, founded Osmo, a company dedicated to giving computers a sense of smell. In the long run, Osmo aspires to use its knowledge to manufacture scents on demand from sustainable synthetic materials. Today, the company operates as a research lab, using a trained AI to predict the smell of a substance by analyzing its molecular structure. Osmos first tests demonstrated some promising results, with machine accurately describing the scents in 53% of cases. Should Osmo succeed at building a machine capable of recognizing and predicting smells, it will change the digital world forever. How will we interact with our smart devices? How will we use their newly discovered sense of smell to exchange information, share precious memories with each other, or relive moments from the past? Is now the right time for us to come up with ideas, products, and services for the future?Odors are a booming industry that offers designers and engineers a unique opportunity to explore new and brave concepts. With the help of smells, we can transform entire industries, from education to healthcare, crafting immersive multi-sensory experiences for learning and leisure. Smells are a powerful tool that requires precision and perfection to reach the desired effect. Our past shortcomings may have tainted the reputation of scented experiences, but recent progress demonstrates that we have learnt our lessons well. Modern technologies make it even easier to continue the explorations and develop new ways to use smells in entertainment, learning, and wellness in the real world and beyond.Our digital spaces may be devoid of scents, but they will not remain odorless for long.

This article is a sponsored by Sentry.ioGoogle Lighthouse has been one of the most effective ways to gamify and promote web page performance among developers. Using Lighthouse, we can assess web pages based on overall performance, accessibility, SEO, and what Google considers best practices, all with the click of a button.We might use these tests to evaluate out-of-the-box performance for front-end frameworks or to celebrate performance improvements gained by some diligent refactoring. And you know you love sharing screenshots of your perfect Lighthouse scores on social media. Its a well-deserved badge of honor worthy of a confetti celebration. Just the fact that Lighthouse gets developers like us talking about performance is a win. But, whilst I dont want to be a party pooper, the truth is that web performance is far more nuanced than this. In this article, well examine how Google Lighthouse calculates its performance scores, and, using this information, we will attempt to hack those scores in our favor, all in the name of fun and science because in the end, Lighthouse is simply a good, but rough guide for debugging performance. Well have some fun with it and see to what extent we can trick Lighthouse into handing out better scores than we may deserve.But first, lets talk about data.Field Data Is ImportantLocal performance testing is a great way to understand if your website performance is trending in the right direction, but it wont paint a full picture of reality. The World Wide Web is the Wild West, and collectively, weve almost certainly lost track of the variety of device types, internet connection speeds, screen sizes, browsers, and browser versions that people are using to access websites all of which can have an impact on page performance and user experience.Field data and lots of it collected by an application performance monitoring tool like Sentry from real people using your website on their devices will give you a far more accurate report of your website performance than your lab data collected from a small sample size using a high-spec super-powered dev machine under a set of controlled conditions. Philip Walton reported in 2021 that almost half of all pages that scored 100 on Lighthouse didnt meet the recommended Core Web Vitals thresholds based on data from the HTTP Archive. Web performance is more than a single core web vital metric or Lighthouse performance score. What were talking about goes way beyond the type of raw data were working with.Web Performance Is More Than NumbersSpeed is often the first thing that comes up when talking about web performance just how long does a page take to load? This isnt the worst thing to measure, but we must bear in mind that speed is probably influenced heavily by business KPIs and sales targets. Google released a report in 2018 suggesting that the probability of bounces increases by 32% if the page load time reaches higher than three seconds, and soars to 123% if the page load time reaches 10 seconds. So, we must conclude that converting more sales requires reducing bounce rates. And to reduce bounce rates, we must make our pages load faster.But what does load faster even mean? At some point, were physically incapable of making a web page load any faster. Humans and the servers that connect them are spread around the globe, and modern internet infrastructure can only deliver so many bytes at a time.The bottom line is that page load is not a single moment in time. In an article titled What is speed? Google explains that a page load event is:[] an experience that no single metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as fast, and if you just focus solely on one, you might miss bad experiences that happen during the rest of the time.The key word here is experience. Real web performance is less about numbers and speed than it is about how we experience page load and page usability as users. And this segues nicely into a discussion of how Google Lighthouse calculates performance scores. (Its much less about pure speed than you might think.)How Google Lighthouse Performance Scores Are CalculatedThe Google Lighthouse performance score is calculated using a weighted combination of scores based on core web vital metrics (i.e., First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS)) and other speed-related metrics (i.e., Speed Index (SI) and Total Blocking Time (TBT)) that are observable throughout the page load timeline.This is how the metrics are weighted in the overall score: Metric Weighting (%) Total Blocking Time 30 Cumulative Layout Shift 25 Largest Contentful Paint 25 First Contentful Paint 10 Speed Index 10 The weighting assigned to each score gives us insight into how Google prioritizes the different building blocks of a good user experience:1. A Web Page Should Respond to User InputThe highest weighted metric is Total Blocking Time (TBT), a metric that looks at the total time after the First Contentful Paint (FCP) to help indicate where the main thread may be blocked long enough to prevent speedy responses to user input. The main thread is considered blocked any time theres a JavaScript task running on the main thread for more than 50ms. Minimizing TBT ensures that a web page responds to physical user input (e.g., key presses, mouse clicks, and so on).2. A Web Page Should Load Useful Content With No Unexpected Visual ShiftsThe next most weighted Lighthouse metrics are Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS). LCP marks the point in the page load timeline when the pages main content has likely loaded and is therefore useful.At the point where the main content has likely loaded, you also want to maintain visual stability to ensure that users can use the page and are not affected by unexpected visual shifts (CLS). A good LCP score is anything less than 2.5 seconds (which is a lot higher than we might have thought, given we are often trying to make our websites as fast as possible).3. A Web Page Should Load SomethingThe First Contentful Paint (FCP) metric marks the first point in the page load timeline where the user can see something on the screen, and the Speed Index (SI) measures how quickly content is visually displayed during page load over time until the page is complete.Your page is scored based on the speed indices of real websites using performance data from the HTTP Archive. A good FCP score is less than 1.8 seconds and a good SI score is less than 3.4 seconds. Both of these thresholds are higher than you might expect when thinking about speed.Usability Is Favored Over Raw SpeedGoogle Lighthouses performance scoring is, without a doubt, less about speed and more about usability. Your SI and FCP could be super quick, but if your LCP takes too long to paint, and if CLS is caused by large images or external content taking some time to load and shifting things visually, then your overall performance score will be lower than if your page was a little slower to render the FCP but didnt cause any CLS. Ultimately, if the page is unresponsive due to JavaScript blocking the main thread for more than 50ms, your performance score will suffer more than if the page was a little slow to paint the FCP.To understand more about how the weightings of each metric contribute to the final performance score, you can play about with the sliders on the Lighthouse Scoring Calculator, and heres a rudimentary table demonstrating the effect of skewed individual metric weightings on the overall performance score, proving that page usability and responsiveness is favored over raw speed. Description FCP (ms) SI (ms) LCP (ms) TBT (ms) CLS Overall Score Slow to show something on screen 6000 0 0 0 0 90 Slow to load content over time 0 5000 0 0 0 90 Slow to load the largest part of the page 0 0 6000 0 0 76 Visual shifts occurring during page load 0 0 0 0 0.82 76 Page is unresponsive to user input 0 0 0 2000 0 70 The overall Google Lighthouse performance score is calculated by converting each raw metric value into a score from 0 to 100 according to where it falls on its Lighthouse scoring distribution, which is a log-normal distribution derived from the performance metrics of real website performance data from the HTTP Archive. There are two main takeaways from this mathematically overloaded information:Your Lighthouse performance score is plotted against real website performance data, not in isolation.Given that the scoring uses log-normal distribution, the relationship between the individual metric values and the overall score is non-linear, meaning you can make substantial improvements to low-performance scores quite easily, but it becomes more difficult to improve an already high score.Read more about how metric scores are determined, including a visualization of the log-normal distribution curve on developer.chrome.com.Can We Trick Google Lighthouse?I appreciate Googles focus on usability over pure speed in the web performance conversation. It urges developers to think less about aiming for raw numbers and more about the real experiences we build. That being said, Ive wondered whether today in 2024, its possible to fool Google Lighthouse into believing that a bad page in terms of usability and usefulness is actually a great one.I put on my lab coat and science goggles to investigate. All tests were conducted:Using the Chromium Lighthouse plugin,In an incognito window in the Arc browser,Using the navigation and mobile settings (apart from where described differently),By me, in a lab (i.e., no field data).That all being said, I fully acknowledge that my controlled test environment contradicts my advice at the top of this post, but the experiment is an interesting ride nonetheless. What I hope youll take away from this is that Lighthouse scores are only one piece and a tiny one at that of a very large and complex web performance puzzle. And, without field data, Im not sure any of this matters anyway.How to Hack FCP and LCP ScoresTL;DR: Show the smallest amount of LCP-qualifying content on load to boost the FCP and LCP scores until the Lighthouse test has likely finished.FCP marks the first point in the page load timeline where the user can see anything at all on the screen, while LCP marks the point in the page load timeline when the main page content (i.e., the largest text or image element) has likely loaded. A fast LCP helps reassure the user that the page is useful. Likely and useful are the important words to bear in mind here.What Counts as an LCP ElementThe types of elements on a web page considered by Lighthouse for LCP are:<img> elements,<image> elements inside an <svg> element,<video> elements,An element with a background image loaded using the url() function, (and not a CSS gradient), andBlock-level elements containing text nodes or other inline-level text elements.The following elements are excluded from LCP consideration due to the likelihood they do not contain useful content:Elements with zero opacity (invisible to the user),Elements that cover the full viewport (likely to be background elements), andPlaceholder images or other images with low entropy (i.e., low informational content, such as a solid-colored image).However, the notion of an image or text element being useful is completely subjective in this case and generally out of the realm of what machine code can reliably determine. For example, I built a page containing nothing but a <h1> element where, after 10 seconds, JavaScript inserts more descriptive text into the DOM and hides the <h1> element.Lighthouse considers the heading element to be the LCP element in this experiment. At this point, the page load timeline has finished, but the pages main content has not loaded, even though Lighthouse thinks it is likely to have loaded within those 10 seconds. Lighthouse still awards us with a perfect score of 100 even if the heading is replaced by a single punctuation mark, such as a full stop, which is even less useful.This test suggests that if you need to load page content via client-side JavaScript, well want to avoid displaying a skeleton loader screen since that requires loading more elements on the page. And since we know the process will take some time and that we can offload the network request from the main thread to a web worker so it wont affect the TBT we can use some arbitrary splash screen that contains a minimal viable LCP element (for better FCP scoring). This way, were giving Lighthouse the impression that the page is useful to users quicker than it actually is.All we need to do is include a valid LCP element that contains something that counts as the FCP. While I would never recommend loading your main page content via client-side JavaScript in 2024 (serve static HTML from a CDN instead or build as much of the page as you can on a server), I would definitely not recommend this hack for a good user experience, regardless of what the Lighthouse performance score tells you. This approach also wont earn you any favors with search engines indexing your site, as the robots are unable to discover the main content while it is absent from the DOM.I also tried this experiment with a variety of random images representing the LCP to make the page even less useful. But given that I used small file sizes made smaller and converted into next-gen image formats using a third-party image API to help with page load speed it seemed that Lighthouse interpreted the elements as placeholder images or images with low entropy. As a result, those images were disqualified as LCP elements, which is a good thing and makes the LCP slightly less hackable.View the demo page and use Chromium DevTools in an incognito window to see the results yourself.This hack, however, probably wont hold up in many other use cases. Discord, for example, uses the splash screen approach when you hard-refresh the app in the browser, and it receives a sad 29 performance score.Compared to my DOM-injected demo, the LCP element was calculated as some content behind the splash screen rather than elements contained within the splash screen content itself, given there were one or more large images in the focussed text channel I tested on. One could argue that Lighthouse scores are less important for apps that are behind authentication anyway: they dont need to be indexed by search engines.There are likely many other situations where apps serve user-generated content and you might be unable to control the LCP element entirely, particularly regarding images.For example, if you can control the sizes of all the images on your web pages, you might be able to take advantage of an interesting hack or optimization (in very large quotes) to arbitrarily game the system, as was the case of RentPath. In 2021, developers at RentPath managed to improve their Lighthouse performance score by 17 points when increasing the size of image thumbnails on a web page. They convinced Lighthouse to calculate the LCP element as one of the larger thumbnails instead of a Google Map tile on the page, which takes considerably longer to load via JavaScript.The bottom line is that you can gain higher Lighthouse performance scores if you are aware of your LCP element and in control of it, whether thats through a hack like RentPaths or mine or a real-deal improvement. That being said, whilst Ive described the splash screen approach as a hack in this post, that doesnt mean this type of experience couldnt offer a purposeful and joyful experience. Performance and user experience are about understanding whats happening during page load, and its also about intent.How to Hack CLS ScoresTL;DR: Defer loading content that causes layout shifts until the Lighthouse test has likely finished to make the test think it has enough data. CSS transforms do not negatively impact CLS, except if used in conjunction with new elements added to the DOM.CLS is measured on a decimal scale; a good score is less than 0.1, and a poor score is greater than 0.25. Lighthouse calculates CLS from the largest burst of unexpected layout shifts that occur during a users time on the page based on a combination of the viewport size and the movement of unstable elements in the viewport between two rendered frames. Smaller one-off instances of layout shift may be inconsequential, but a bunch of layout shifts happening one after the other will negatively impact your score.If you know your page contains annoying layout shifts on load, you can defer them until after the page load event has been completed, thus fooling Lighthouse into thinking there is no CLS. This demo page I created, for example, earns a CLS score of 0.143 even though JavaScript immediately starts adding new text elements to the page, shifting the original content up. By pausing the JavaScript that adds new nodes to the DOM by an arbitrary five seconds with a setTimeout(), Lighthouse doesnt capture the CLS that takes place.This other demo page earns a performance score of 100, even though it is arguably less useful and useable than the last page given that the added elements pop in seemingly at random without any user interaction.Whilst it is possible to defer layout shift events for a page load test, this hack definitely wont work for field data and user experience over time (which is a more important focal point, as we discussed earlier). If we perform a time span test in Lighthouse on the page with deferred layout shifts, Lighthouse will correctly report a non-green CLS score of around 0.186.If you do want to intentionally create a chaotic experience similar to the demo, you can use CSS animations and transforms to more purposefully pop the content into view on the page. In Googles guide to CLS, they state that content that moves gradually and naturally from one position to another can often help the user better understand whats going on and guide them between state changes again, highlighting the importance of user experience in context.On this next demo page, Im using CSS transform to scale() the text elements from 0 to 1 and move them around the page. The transforms fail to trigger CLS because the text nodes are already in the DOM when the page loads. That said, I did observe in my testing that if the text nodes are added to the DOM programmatically after the page loads via JavaScript and then animated, Lighthouse will indeed detect CLS and score things accordingly.You Cant Hack a Speed Index ScoreThe Speed Index score is based on the visual progress of the page as it loads. The quicker your content loads nearer the beginning of the page load timeline, the better.It is possible to do some hack to trick the Speed Index into thinking a page load timeline is slower than it is. Conversely, theres no real way to fake loading content faster than it does. The only way to make your Speed Index score better is to optimize your web page for loading as much of the page as possible, as soon as possible. Whilst not entirely realistic in the web landscape of 2024 (mainly because it would put designers out of a job), you could go all-in to lower your Speed Index as much as possible by:Delivering static HTML web pages only (no server-side rendering) straight from a CDN,Avoiding images on the page,Minimizing or eliminating CSS, andPreventing JavaScript or any external dependencies from loading.You Also Cant (Really) Hack A TBT ScoreTBT measures the total time after the FCP where the main thread was blocked by JavaScript tasks for long enough to prevent responses to user input. A good TBT score is anything lower than 200ms.JavaScript-heavy web applications (such as single-page applications) that perform complex state calculations and DOM manipulation on the client on page load (rather than on the server before sending rendered HTML) are prone to suffering poor TBT scores. In this case, you could probably hack your TBT score by deferring all JavaScript until after the Lighthouse test has finished. That said, youd need to provide some kind of placeholder content or loading screen to satisfy the FCP and LCP and to inform users that something will happen at some point. Plus, youd have to go to extra lengths to hack around the front-end framework youre using. (You dont want to load a placeholder page that, at some point in the page load timeline, loads a separate React app after an arbitrary amount of time!)Whats interesting is that while were still doing all sorts of fancy things with JavaScript in the client, advances in the modern web ecosystem are helping us all reduce the probability of a less-than-stellar TBT score. Many front-end frameworks, in partnership with modern hosting providers, are capable of rendering pages and processing complex logic on demand without any client-side JavaScript. While eliminating JavaScript on the client is not the goal, we certainly have a lot of options to use a lot less of it, thus minimizing the risk of doing too much computation on the main thread on page load.Bottom Line: Lighthouse Is Still Just A Rough GuideGoogle Lighthouse cant detect everything thats wrong with a particular website. Whilst Lighthouse performance scores prioritize page usability in terms of responding to user input, it still cant detect every terrible usability or accessibility issue in 2024.In 2019, Manuel Matuzovi published an experiment where he intentionally created a terrible page that Lighthouse thought was pretty great. I hypothesized that five years later, Lighthouse might do better; but it doesnt.On this final demo page I put together, input events are disabled by CSS and JavaScript, making the page technically unresponsive to user input. After five seconds, JavaScript flips a switch and allows you to click the button. The page still scores 100 for both performance and accessibility.You really cant rely on Lighthouse as a substitute for usability testing and common sense.Some More Silly HacksAs with everything in life, theres always a way to game the system. Here are some more tried and tested guaranteed hacks to make sure your Lighthouse performance score artificially knocks everyone elses out of the park:Only run Lighthouse tests using the fastest and highest-spec hardware.Make sure your internet connection is the fastest it can be; relocate if you need to.Never use field data, only lab data, collected using the aforementioned fastest and highest-spec hardware and super-speed internet connection.Rerun the tests in the lab using different conditions and all the special code hacks I described in this post until you get the result(s) you want to impress your friends, colleagues, and random people on the internet.Note: The best way to learn about web performance and how to optimize your websites is to do the complete opposite of everything weve covered in this article all of the time. And finally, to seriously level up your performance skills, use an application monitoring tool like Sentry. Think of Lighthouse as the canary and Sentry as the real-deal production-data-capturing, lean, mean, web vitals machine.And finally-finally, heres the link to the full demo site for educational purposes.