If youve been in the web development game for longer, you might recall the days when CSS was utterly confusing and you had to come up with hacks and workarounds to make things work. Luckily, these days are over and new features such as container queries, cascade layers, CSS nesting, the :has selector, grid and subgrid, and even new color spaces make CSS more powerful than ever before.And the innovation doesnt stop here. We also might have style queries and perhaps even state queries, along with balanced text-wrapping and CSS anchor positioning coming our way.With all these lovely new CSS features on the horizon, in this post, we dive into the world of CSS with a few helpful techniques, a deep-dive into specificity, hanging punctuation, and self-modifying CSS variables. We hope theyll come in handy in your work.Cascade And Specificity PrimerMany fear the cascade and specificity in CSS. However, the concept isnt as hard to get to grips with as one might think. To help you get more comfortable with two of the most fundamental parts of CSS, Andy Bell wrote a wonderful primer on the cascade and specificity.The guide explains how certain CSS property types will be prioritized over others and dives deeper into specificity scoring to help you assess how likely it is that the CSS of a specific rule will apply. Andy uses practical examples to illustrate the concepts and simplifies the underlying mental model to make it easy to adopt and utilize. A power boost for your CSS skills.Testing HTML With Modern CSSHave you ever considered testing HTML with CSS instead of JavaScript? CSS selectors today are so powerful that it is actually possible to test for most kinds of HTML patterns using CSS alone. A proponent of the practice, Heydon Pickering summarized everything you need to know about testing HTML with CSS, whether you want to test accessibility, uncover HTML bloat, or check the general usability.As Heydon points out, testing with CSS has quite some benefits. Particularly if you work in the browser and prefer exploring visual regressions and inspector information over command line logs, testing with CSS could be for you. It also shines in situations where you dont have direct access to a clients stack: Just provide a test stylesheet, and clients can locate instances of bad patterns you have identified for them without having to onboard you to help them do so. Clever!Self-Modifying CSS VariablesThe CSS spec for custom properties does not allow a custom property to reference itself although there are quite some use cases where such a feature would be useful. To close the gap, Lea Verou proposed an inherit() function in 2018, which the CSSWG added to the specs in 2021. It hasnt been edited-in yet, but Roman Komarov found a workaround that makes it possible to start involving its behavior.Romans approach uses container-style queries as a way to access the previous state of a custom property. It can be useful when you want to cycle through various hues without having a static list of values, to match the border-radius visually, or to nest menu lists, for example. The workaround is still strictly experimental (so do not use it in production!), but since it is likely that style queries will gain broad browser support before inherit(), it has great potential.Hanging Punctuation In CSShanging-punctuation is a neat little CSS property. It extends punctuation marks such as opening quotes to cater to nice, clean blocks of text. And while its currently only supported in Safari, it doesnt hurt to include it in your code, as the property is a perfect example of progressive enhancement: It leaves things as they are in browsers that dont support it and adds the extra bit of polish in browsers that do.Jeremy Keith noticed an unintended side-effect of hanging-punctuation, though. When you apply it globally, its also applied to form fields. So, if the text in a form field starts with a quotation mark or some other piece of punctuation, its pushed outside the field and hidden. Jeremy shares a fix for it: Add input, textarea { hanging-punctuation: none; } to prevent your quotation marks from disappearing. A small tip that can save you a lot of headaches.Fixing aspect-ratio IssuesThe aspect-ratio property shines in fluid environments. It can handle anything from inserting a square-shaped <div> to matching the 16:9 size of a <video>, without you thinking in exact dimensions. And most of the time, it does so flawlessly. However, there are some things that can break aspect-ratio. Chris Coyier takes a closer look at three reasons why your aspect-ratio might not work as expected.As Chris explains, one potential breakage is setting both dimensions which might seem obvious, but it can be confusing if one of the dimensions is set from somewhere you didnt expect. Stretching and content that forces height can also lead to unexpected results. A great overview of what to look out for when aspect-ratio breaks.Masonry Layout With CSSCSS Grid has taken layouts on the web to the next level. However, as powerful as CSS is today, not every layout that can be imagined is feasible. Masonry layout is one of those things that cant be accomplished with CSS alone. To change that, the CSS Working Group is asking for your help.There are currently two approaches in discussion at the CSS Working Group about how CSS should handle masonry-style layouts and they are asking for insights from real-world developers and designers to find the best solution.The first approach would expand CSS Grid to include masonry, and the second approach would be to introduce a masonry layout as a display: masonry display type. Jen Simmons summarized what you need to know about the ongoing debate and how you can contribute your thoughts on which direction CSS should take.Before you come to a conclusion, also be sure to read Rachel Andrews post on the topic. She explains why the Chrome team has concerns about implementing a masonry layout as a part of the CSS Grid specification and clarifies what the alternate proposal enables.Boost Your CSS SkillsIf youd like to dive deeper into CSS, weve got your back with a few friendly events and SmashingConfs coming up this year:Advanced Modern CSS Masterclass with Manuel Matuzovi, June 24 July 8SmashingConf Freiburg 2024 The Web, Sep 911SmashingConf New York 2024 Front-End & UX, Oct 710SmashingConf Antwerp 2024 Design & UX, Oct 2831Wed be absolutely delighted to welcome you to one of our special Smashing experiences be it online or in person!Smashing Weekly NewsletterWith our weekly newsletter, we aim to bring you useful, practical tidbits and share some of the helpful things that folks are working on in the web industry. There are so many talented folks out there working on brilliant projects, and wed appreciate it if you could help spread the word and give them the credit they deserve!Also, by subscribing, there are no third-party mailings or hidden advertising, and your support really helps us pay the bills. Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime theyll be sure to get back to you as soon as they can.

For UX researchers and designers, our journey doesnt end with meticulously gathered data or well-crafted design concepts saved on our laptops or in the cloud. Our true impact lies in effectively communicating research findings and design concepts to key stakeholders and securing their buy-in for implementing our user-centered solutions. This is where persuasion and communication theory become powerful tools, empowering UX practitioners to bridge the gap between research and action.I shared a framework for conducting UX research in my previous article on infusing communication theory and UX. In this article, Ill focus on communication and persuasion considerations for presenting our research and design concepts to key stakeholder groups. A Word On Persuasion: Guiding Understanding, Not ManipulationUX professionals can strategically use persuasion techniques to turn complex research results into clear, practical recommendations that stakeholders can understand and act on. Its crucial to remember that persuasion is about helping people understand what to do, not tricking them. When stakeholders see the value of designing with the user in mind, they become strong partners in creating products and services that truly meet user needs. Were not trying to manipulate anyone; were trying to make sure our ideas get the attention they deserve in a busy world.The Hovland-Yale Model Of PersuasionThe Hovland-Yale model, a framework for understanding how persuasion works, was developed by Carl Hovland and his team at Yale University in the 1950s. Their research was inspired by World War II propaganda, as they wanted to figure out what made some messages more convincing than others.In the Hovland-Yale model, persuasion is understood as a process involving the Independent variables of Source, Message, and Audience. The elements of each factor then lead to the Audience having internal mediating processes around the topic, which, if independent variables are strong enough, can strengthen or change attitudes or behaviors. The interplay of the internal mediating processes leads to persuasion or not, which then leads to the observable effect of the communication (or not, if the message is ineffective). The model proposes that if these elements are carefully crafted and applied, the intended change in attitude or behavior (Effect) is more likely to be successful.The diagram below helps identify the parts of persuasive communication. It shows what you can control as a presenter, how people think about the message and the impact it has. If done well, it can lead to change. Ill focus exclusively on the independent variables in the far left side of the diagram in this article because, theoretically, this is what you, as the outside source creating a persuasive message, are in control of and, if done well, would lead to the appropriate mediating processes and desired observable effects.Effective communication can reinforce currently held positions. You dont always need to change minds when presenting research; much of what we find and present might align with currently held beliefs and support actions our stakeholders are already considering.Over the years, researchers have explored the usefulness and limitations of this model in various contexts. Ive provided a list of citations at the end of this article if you are interested in exploring academic literature on the Hovland-Yale model. Reflecting on some of the research findings can help shape how we create and deliver our persuasive communication. Some consistent from academia highlight that:Source credibility significantly influences the acceptance of a persuasive message. A high-credibility source is more persuasive than a low-credibility one.Messages that are logically structured, clear, and relatively concise are more likely to be persuasive.An audiences attitude change is also dependent on the channel of communication. Mass media is found to be less effective in changing attitudes than face-to-face communication.The audiences initial attitude, intelligence, and self-esteem have a significant role in the persuasion process. Research suggests that individuals with high intelligence are typically more resistant to persuasion efforts, and those with moderate self-esteem are easier to persuade than those with low or high self-esteem.The effect of persuasive messages tends to fade over time, especially if delivered by a non-credible source. This suggests a need to reinforce even effective messages on a regular basis to maintain an effect.Ill cover the impact of each of these bullets on UX research and design presentations in the relevant sections below.Its important to note that while the Hovland-Yale model provides valuable insight into persuasive communication, it remains a simplification of a complex process. Actual attitude change and decision-making can be influenced by a multitude of other factors not covered in this model, like emotional states, group dynamics, and more, necessitating a multi-faceted approach to persuasion. However, the model provides a manageable framework to strengthen the communication of UX research findings, with a focus on elements that are within the control of the researcher and product team. Ill break down the process of presenting findings to various audiences in the following section.Lets move into applying the models to our work as UX practitioners with a focus on how the model applies to how we prepare and present our findings to various stakeholders. You can reference the diagram above as needed as we move through the Independent variables.Applying The Hovland-Yale Model To Presenting Your UX Research FindingsLets break down the key parts of the Hovland-Yale model and see how we can use them when presenting our UX research and design ideas.SourceRevised: The Hovland-Yale model stresses that where a message comes from greatly affects how believable and effective it is. Research shows that a convincing source needs to be seen as dependable, informed, and trustworthy. In UX research, this source is usually the researcher(s) and other UX team members who present findings, suggest actions, lead workshops, and share design ideas. Its crucial for the UX team to build trust with their audience, which often includes users, stakeholders, and designers.You can demonstrate and strengthen your credibility throughout the research process and once again when presenting your findings. How Can You Make Yourself More Credible?You should start building your expertise and credibility before you even finish your research. Often, stakeholders will have already formed an opinion about your work before you even walk into the room. Here are a couple of ways to boost your reputation before or at the beginning of a project:Case StudiesA well-written case study about your past work can be a great way to show stakeholders the benefits of user-centered design. Make sure your case studies match what your stakeholders care about. Dont just tell an interesting story; tell a story that matters to them. Understand their priorities and tailor your case study to show how your UX work has helped achieve goals like higher ROI, happier customers, or lower turnover. Share these case studies as a document before the project starts so stakeholders can review them and get a positive impression of your work.Thought LeadershipSharing insights and expertise that your UX team has developed is another way to build credibility. This kind of thought leadership can establish your team as the experts in your field. It can take many forms, like blog posts, articles in industry publications, white papers, presentations, podcasts, or videos. You can share this content on your website, social media, or directly with stakeholders.For example, if youre about to start a project on gathering customer feedback, share any relevant articles or guides your team has created with your stakeholders before the project kickoff. If you are about to start developing a voice of the customer program and you happen to have Victor or Dana on your team, share their article on creating a VoC to your group of stakeholders prior to the kickoff meeting. [Shameless self-promotion and a big smile emoji].You can also build credibility and trust while discussing your research and design, both during the project and when you present your final results.Business Goals AlignmentTo really connect with stakeholders, make sure your UX goals and the companys business goals work together. Always tie your research findings and design ideas back to the bigger picture. This means showing how your work can affect things like customer happiness, more sales, lower costs, or other important business measures. You can even work with stakeholders to figure out which measures matter most to them. When you present your designs, point out how theyll help the company reach its goals through good UX.Industry BenchmarksThese days, its easier to find data on how other companies in your industry are doing. Use this to your advantage! Compare your findings to these benchmarks or even to your competitors. This can help stakeholders feel more confident in your work. Show them how your research fits in with industry trends or how it uncovers new ways to stand out. When you talk about your designs, highlight how youve used industry best practices or made changes based on what youve learned from users.Methodological TransparencyBe open and honest about how you did your research. This shows you know what youre doing and that you can be trusted. For example, if you were looking into why fewer people are renewing their subscriptions to a fitness app, explain how you planned your research, who you talked to, how you analyzed the data, and any challenges you faced. This transparency helps people accept your research results and builds trust.Increasing Credibility Through Design ConceptsHere are some specific ways to make your design concepts more believable and trustworthy to stakeholders:Ground Yourself in Research. Youve done the research, so use it! Make sure your design decisions are based on your findings and user data. When you present, highlight the data that supports your choices.Go Beyond Mockups. Its helpful for stakeholders to see your designs in action. Static mockups are a good start, but try creating interactive prototypes that show how users will move through and use your design. This is especially important if youre creating something new that stakeholders might have trouble visualizing.User Quotes and Testimonials. Include quotes or stories from users in your presentation. This makes the process more personal and shows that youre focused on user needs. You can use these quotes to explain specific design choices.Before & After Impact. Use visuals or user journey maps to show how your design solution improves the user experience. If youve mapped out the current user journey or documented existing problems, show how your new design fixes those problems. Dont leave stakeholders guessing about your design choices. Briefly explain why you made key decisions and how they help users or achieve business goals. You should have research and stakeholder input to back up your decisions.Show Your Process. When presenting a more developed concept, show the work that led up to it. Dont just share the final product. Include early sketches, wireframes, or simple prototypes to show how the design evolved and the reasoning behind your choices. This is especially helpful for executives or stakeholders who havent been involved in the whole process.Be Open to Feedback and Iteration. Work together with stakeholders. Show that youre open to their feedback and explain how their input can help you improve your designs.Much of what Ive covered above are also general best practices for presenting. Remember, these are just suggestions. You dont have to use every single one to make your presentations more persuasive. Try different things, see what works best for you and your stakeholders, and have fun with it! The goal is to build trust and credibility with your UX team.MessageThe Hovland-Yale model, along with most other communication models, suggests that what you communicate is just as important as how you communicate it. In UX research, your message is usually your insights, data analysis, findings, and recommendations. Ive touched on this in the previous section because its hard to separate the source (whos talking) from the message (what theyre saying). For example, building trust involves being transparent about your research methods, which is part of your message. So, some of what Im about to say might sound familiar.For this article, lets define the message as your research findings and everything that goes with them (e.g., what you say in your presentation, the slides you use, other media), as well as your design concepts (how you show your design solutions, including drawings, wireframes, prototypes, and so on).The Hovland-Yale model says its important to make your message easy to understand, relevant, and impactful. For example, instead of just saying,30% of users found the signup process difficult.you could say,30% of users struggled to sign up because the process was too complicated. This could lead to fewer renewals. Making the signup process easier could increase renewals and improve the overall experience.Storytelling is also a powerful way to get your message across. Weaving your findings into a narrative helps people connect with your data on a human level and remember your key points. Using real quotes or stories from users makes your presentation even more compelling.Here are some other tips for delivering a persuasive message:Practice Makes PerfectRehearse your presentation. This will help you smooth out any rough spots, anticipate questions, and feel more confident.Anticipate ConcernsThink about any objections stakeholders might have and be ready to address them with data.Welcome FeedbackEncourage open discussion during your presentation. Listen to what stakeholders have to say and show that youre willing to adapt your recommendations based on their concerns. This builds trust and makes everyone feel like theyre part of the process.Follow Through is KeyAfter your presentation, send a clear summary of the main points and action items. This shows youre professional and makes it easy for stakeholders to refer back to your findings.When presenting design concepts, its important to tell, not just show, what youre proposing. Stakeholders might not have a deep understanding of UX, so just showing them screenshots might not be enough. Use user stories to walk them through the redesigned experience. This helps them understand how users will interact with your design and what benefits it will bring. Static screens show the what, but user stories reveal the why and how. By focusing on the user journey, you can demonstrate how your design solves problems and improves the overall experience.For example, if youre suggesting changes to the search bar and adding tooltips, you could say:Imagine a user lands on the homepage and sees the new, larger search bar. They enter their search term and get results. If they see an unfamiliar tool or a new action, they can hover over it to see a brief description.Here are some other ways to make your design concepts clearer and more persuasive:Clear Design LanguageUse a consistent and visually appealing design language in your mockups and prototypes. This shows professionalism and attention to detail.Accessibility Best PracticesMake sure your design is accessible to everyone. This shows that you care about inclusivity and user-centered design.One final note on the message is that research has found the likelihood of an audiences attitude change is also dependent on the channel of communication. Mass media is found to be less effective in changing attitudes than face-to-face communication. Distributed teams and remote employees can employ several strategies to compensate for any potential impact reduction of asynchronous communication:Interactive ElementsIncorporate interactive elements into presentations, such as polls, quizzes, or clickable prototypes. This can increase engagement and make the experience more dynamic for remote viewers.Video SummariesCreate short video summaries of key findings and recommendations. This adds a personal touch and can help convey nuances that might be lost in text or static slides.Virtual Q&A SessionsSchedule dedicated virtual Q&A sessions where stakeholders can ask questions and engage in discussions. This allows for real-time interaction and clarification, mimicking the benefits of face-to-face communication.Follow-up CommunicationActively follow up with stakeholders after theyve reviewed the materials. Offer to discuss the content, answer questions, and gather feedback. This demonstrates a commitment to communication and can help solidify key takeaways.Framing Your Message for Maximum ImpactThe way you frame an issue can greatly influence how stakeholders see it. Framing is a persuasion technique that can help your message resonate more deeply with specific stakeholders. Essentially, you want to frame your message in a way that aligns with your stakeholders attitudes and values and presents your solution as the next logical step. There are many resources on how to frame messages, as this technique has been used often in public safety and public health research to encourage behavior change. This article discusses applying framing techniques for digital design.You can also frame issues in a way that motivates your stakeholders. For example, instead of calling usability issues problems, I like to call them opportunities. This emphasizes the potential for improvement. Lets say your research on a hospital website finds that the appointment booking process is confusing. You could frame this as an opportunity to improve patient satisfaction and maybe even reduce call center volume by creating a simpler online booking system. This way, your solution is a win-win for both patients and the hospital. Highlighting the positive outcomes of your proposed changes and using language that focuses on business benefits and user satisfaction can make a big difference.AudienceUnderstanding your audiences goals is essential before embarking on any research or design project. It serves as the foundation for tailoring content, supporting decision-making processes, ensuring clarity and focus, enhancing communication effectiveness, and establishing metrics for evaluation.One specific aspect to consider is securing buy-in from the product and delivery teams prior to beginning any research or design. Without their investment in the outcomes and input on the process, it can be challenging to find stakeholders who see value in a project you created in a vacuum. Engaging with these teams early on helps align expectations, foster collaboration, and ensure that the research and design efforts are informed by the organizations objectives.Once youve identified your key stakeholders and secured buy-in, you should then Map the Decision-Making Process or understand the decision-making process your audience goes through, including the pain points, considerations, and influencing factors.How are decisions made, and who makes them?Is it group consensus?Are there key voices that overrule all others?Is there even a decision to be made in regard to the work you will do?Understanding the decision-making process will enable you to provide the necessary information and support at each stage.Finally, prior to engaging in any work, set clear objectives with your key stakeholders. Your UX team needs to collaborate with the product and delivery teams to establish clear objectives for the research or design project. These objectives should align with the organizations goals and the audiences needs.By understanding your audiences goals and involving the product and delivery teams from the outset, you can create research and design outcomes that are relevant, impactful, and aligned with the organizations objectives.As the source of your message, its your job to understand who youre talking to and how they see the issue. Different stakeholders have different interests, goals, and levels of knowledge. Its important to tailor your communication to each of these perspectives. Adjust your language, what you emphasize, and the complexity of your message to suit your audience. Technical jargon might be fine for technical stakeholders, but it could alienate those without a technical background.Audience Characteristics: Know Your StakeholdersRemember, your audiences existing opinions, intelligence, and self-esteem play a big role in how persuasive you can be. Research suggests that people with higher intelligence tend to be more resistant to persuasion, while those with moderate self-esteem are easier to persuade than those with very low or very high self-esteem. Understanding your audience is key to giving a persuasive presentation of your UX research and design concepts. Tailoring your communication to address the specific concerns and interests of your stakeholders can significantly increase the impact of your findings.To truly know your audience, you need information about who youll be presenting to, and the more you know, the better. At the very least, you should identify the different groups of stakeholders in your audience. This could include designers, developers, product managers, and executives. If possible, try to learn more about your key stakeholders. You could interview them at the beginning of your process, or you could give them a short survey to gauge their attitudes and behaviors toward the area your UX team is exploring.Then, your UX team needs to decide the following:How can you best keep all stakeholders engaged and informed as the project unfolds?How will your presentation or concepts appeal to different interests and roles?How can you best encourage discussion and decision-making with the different stakeholders present?Should you hold separate presentations because of the wide range of stakeholders you need to share your findings with?How will you prioritize information? Your answers to the previous questions will help you focus on what matters most to each stakeholder group. For example, designers might be more interested in usability issues, while executives might care more about the business impact. If youre presenting to a mixed audience, include a mix of information and be ready to highlight whats relevant to each group in a way that grabs their attention. Adapt your communication style to match each groups preferences. Provide technical details for developers and emphasize user experience benefits for executives.ExampleLets say you did UX research for a mobile banking app, and your audience includes designers, developers, and product managers.Designers:Focus on: Design-related findings like what users prefer in the interface, navigation problems, and suggestions for the visual design.How to communicate: Use visuals like heatmaps and user journey maps to show design challenges. Talk about how fixing these issues can make the overall user experience better.Developers:Focus on: Technical stuff, like performance problems, bugs, or challenges with building the app.How to communicate: Share code snippets or technical details about the problems you found. Discuss possible solutions that the developers can actually build. Be realistic about how much work it will take and be ready to talk about a minimum viable product (MVP).Product Managers:Focus on: Findings that affect how users engage with the app, how long they keep using it, and the overall business goals.How to communicate: Use numbers and data to show how UX improvements can help the business. Explain how the research and your ideas fit into the product roadmap and long-term strategy.By tailoring your presentation to each group, you make sure your message really hits home. This makes it more likely that theyll support your UX research findings and work together to make decisions.The Effect (Impact)The end goal of presenting your findings and design concepts is to get key stakeholders to take action based on what you learned from users. Make sure the impact of your research is crystal clear. Talk about how your findings relate to business goals, customer happiness, and market success (if those are relevant to your product). Suggest clear, actionable next steps in the form of design concepts and encourage feedback and collaboration from stakeholders. This builds excitement and gets people invested. Make sure to answer any questions and ask for more feedback to show that you value their input. Remember, stakeholders play a big role in the products future, so getting them involved increases the value of your research.The Call to Action (CTA)Your audience needs to know what you want them to do. End your presentation with a strong call to action (CTA). But to do this well, you need to be clear on what you want them to do and understand any limitations they might have.For example, if youre presenting to the CEO, tailor your CTA to their priorities. Focus on the return on investment (ROI) of user-centered design. Show how your recommendations can increase sales, improve customer satisfaction, or give the company a competitive edge. Use clear visuals and explain how user needs translate into business benefits. End with a strong, action-oriented statement, likeLets set up a meeting to discuss how we can implement these user-centered design recommendations to reach your strategic goals.If youre presenting to product managers and business unit leaders, focus on the business goals they care about, like increasing revenue or reducing customer churn. Explain your research findings in terms of ROI. For example, a strong CTA could be:Lets try out the redesigned checkout process and aim for a 10% increase in conversion rates next quarter.Remember, the effects of persuasive messages can fade over time, especially if the source isnt seen as credible. This means you need to keep reinforcing your message to maintain its impact.Understanding Limitations and Addressing ConcernsPersuasion is about guiding understanding, not tricking people. Be upfront about any limitations your audience might have, like budget constraints or limited development resources. Anticipate their concerns and address them in your CTA. For example, you could say,I know implementing the entire redesign might need more resources, so lets prioritize the high-impact changes we found in our research to improve the checkout process within our current budget.By considering both your desired outcome and your audiences perspective, you can create a clear, compelling, and actionable CTA that resonates with stakeholders and drives user-centered design decisions.Finally, remember that presenting your research findings and design concepts isnt the end of the road. The effects of persuasive messages can fade over time. Your team should keep looking for ways to reinforce key messages and decisions as you move forward with implementing solutions. Keep your presentations and concepts in a shared folder, remind people of the reasoning behind decisions, and be flexible if there are multiple ways to achieve the desired outcome. Showing how youve addressed stakeholder goals and concerns in your solution will go a long way in maintaining credibility and trust for future projects.A Tool to Track Your Alignment to the Hovland-Yale ModelYou and your UX team are likely already incorporating elements of persuasion into your work. It might be helpful to track how you are doing this to reflect on what works, what doesnt, and where there are gaps. Ive provided a spreadsheet in Figure 3 below for you to modify and use as you might see fit. Ive included sample data to provide an example of what type of information you might want to record. You can set up the structure of a spreadsheet like this as you think about kicking off your next project, or you can fill it in with information from a recently completed project and reflect on what you can incorporate more in the future.Please use the spreadsheet below as a suggestion and make additions, deletions, or changes as best suited to meet your needs. You dont need to be dogmatic in adhering to what Ive covered here. Experiment, find what works best for you, and have fun. Project Phase Persuasion Element Topic Description Example Notes/Reflection Pre-Presentation Audience Stakeholder Group Identify the specific audience segment (e.g., executives, product managers, marketing team) Executives Message Message Objectives What specific goals do you aim to achieve with each group? (e.g., garner funding, secure buy-in for specific features) Secure funding for continued app redesign Source Source Credibility How will you establish your expertise and trustworthiness to each group? (e.g., past projects, relevant data) Highlighted successful previous UX research projects & strong user data analysis skills Message Message Clarity & Relevance Tailor your presentation language and content to resonate with each audiences interests and knowledge level Presented a concise summary of key findings with a focus on potential ROI and revenue growth for executives Presentation & Feedback Source Attention Techniques How did you grab each groups interest? (e.g., visuals, personal anecdotes, surprising data) Opened presentation with a dramatic statistic about mobile banking app usage Message Comprehension Strategies Did you ensure understanding of key information? (e.g., analogies, visuals, Q&A) Used relatable real-world examples and interactive charts to explain user research findings Message Emotional Appeals Did you evoke relevant emotions to motivate action? (e.g., fear of missing out, excitement for potential) Highlighted potential revenue growth and improved customer satisfaction with app redesign Message Retention & Application What steps did you take to solidify key takeaways and encourage action? (e.g., clear call to action, follow-up materials) Ended with a concise call to action for funding approval and provided detailed research reports for further reference Audience Stakeholder Feedback Record their reactions, questions, and feedback during and after the presentation Executives impressed with user insights, product managers requested specific data breakdowns Analysis & Reflection Effect Effective Strategies & Outcomes Identify techniques that worked well and their impact on each group Executives responded well to the emphasis on business impact, leading to conditional funding approval Feedback Improvements for Future Presentations Note areas for improvement in tailoring messages and engaging each stakeholder group Consider incorporating more interactive elements for product managers and diversifying data visualizations for wider appeal Analysis Quantitative Metrics Track changes in stakeholder attitudes Conducted a follow-up survey to measure stakeholder agreement with design recommendations before and after the presentation Assess effectiveness of the presentation Figure 3: Example of spreadsheet categories to track the application of the Hovland-Yale model to your presentation of UX Research findings.ReferencesFoundational WorksHovland, C. I., Janis, I. L., & Kelley, H. H. (1953). Communication and persuasion. New Haven, CT: Yale University Press. (The cornerstone text on the Hovland-Yale model).Weiner, B. J., & Hovland, C. I. (1956). Participating vs. nonparticipating persuasive presentations: A further study of the effects of audience participation. Journal of Abnormal and Social Psychology, 52(2), 105-110. (Examines the impact of audience participation in persuasive communication).Kelley, H. H., & Hovland, C. I. (1958). The communication of persuasive content. Psychological Review, 65(4), 314-320. (Delves into the communication of persuasive messages and their effects).Contemporary ApplicationsPfau, M., & Dalton, M. J. (2008). The persuasive effects of fear appeals and positive emotion appeals on risky sexual behavior intentions. Journal of Communication, 58(2), 244-265. (Applies the Hovland-Yale model to study the effectiveness of fear appeals).Chen, G., & Sun, J. (2010). The effects of source credibility and message framing on consumer online health information seeking. Journal of Interactive Advertising, 10(2), 75-88. (Analyzes the impact of source credibility and message framing, concepts within the model, on health information seeking).Hornik, R., & McHale, J. L. (2009). The persuasive effects of emotional appeals: A meta-analysis of research on advertising emotions and consumer behavior. Journal of Consumer Psychology, 19(3), 394-403. (Analyzes the role of emotions in persuasion, a key aspect of the model, in advertising).

Building successful web products at scale is a multifaceted challenge that demands a combination of technical expertise, strategic decision-making, and a growth-oriented mindset. In Success at Scale, I dive into case studies from some of the webs most renowned products, uncovering the strategies and philosophies that propelled them to the forefront of their industries. Here you will find some of the insights Ive gleaned from these success stories, part of an ongoing effort to build a roadmap for teams striving to achieve scalable success in the ever-evolving digital landscape.Cultivating A Mindset For Scaling SuccessThe foundation of scaling success lies in fostering the right mindset within your team. The case studies in Success at Scale highlight several critical mindsets that permeate the culture of successful organizations.User-CentricitySuccessful teams prioritize the user experience above all else.They invest in understanding their users needs, behaviors, and pain points and relentlessly strive to deliver value. Instagrams performance optimization journey exemplifies this mindset, focusing on improving perceived speed and reducing user frustration, leading to significant gains in engagement and retention.By placing the user at the center of every decision, Instagram was able to identify and prioritize the most impactful optimizations, such as preloading critical resources and leveraging adaptive loading strategies. This user-centric approach allowed them to deliver a seamless and delightful experience to their vast user base, even as their platform grew in complexity.Data-Driven Decision MakingScaling success relies on data, not assumptions.Teams must embrace a data-driven approach, leveraging metrics and analytics to guide their decisions and measure impact. Shopifys UI performance improvements showcase the power of data-driven optimization, using detailed profiling and user data to prioritize efforts and drive meaningful results.By analyzing user interactions, identifying performance bottlenecks, and continuously monitoring key metrics, Shopify was able to make informed decisions that directly improved the user experience. This data-driven mindset allowed them to allocate resources effectively, focusing on the areas that yielded the greatest impact on performance and user satisfaction.Continuous ImprovementScaling is an ongoing process, not a one-time achievement.Successful teams foster a culture of continuous improvement, constantly seeking opportunities to optimize and refine their products. Smashing Magazines case study on enhancing Core Web Vitals demonstrates the impact of iterative enhancements, leading to significant performance gains and improved user satisfaction.By regularly assessing their performance metrics, identifying areas for improvement, and implementing incremental optimizations, Smashing Magazine was able to continuously elevate the user experience. This mindset of continuous improvement ensures that the product remains fast, reliable, and responsive to user needs, even as it scales in complexity and user base.Collaboration And InclusivitySilos hinder scalability.High-performing teams promote collaboration and inclusivity, ensuring that diverse perspectives are valued and leveraged. The Understoods accessibility journey highlights the power of cross-functional collaboration, with designers, developers, and accessibility experts working together to create inclusive experiences for all users.By fostering open communication, knowledge sharing, and a shared commitment to accessibility, The Understood was able to embed inclusive design practices throughout its development process. This collaborative and inclusive approach not only resulted in a more accessible product but also cultivated a culture of empathy and user-centricity that permeated all aspects of their work.Making Strategic Decisions for ScalabilityBeyond cultivating the right mindset, scaling success requires making strategic decisions that lay the foundation for sustainable growth.Technology ChoicesSelecting the right technologies and frameworks can significantly impact scalability. Factors like performance, maintainability, and developer experience should be carefully considered. Notions migration to Next.js exemplifies the importance of choosing a technology stack that aligns with long-term scalability goals.By adopting Next.js, Notion was able to leverage its performance optimizations, such as server-side rendering and efficient code splitting, to deliver fast and responsive pages. Additionally, the developer-friendly ecosystem of Next.js and its strong community support enabled Notions team to focus on building features and optimizing the user experience rather than grappling with low-level infrastructure concerns. This strategic technology choice laid the foundation for Notions scalable and maintainable architecture.Ship Only The Code A User Needs, When They Need ItThis best practice is so important when we want to ensure that pages load fast without over-eagerly delivering JavaScript a user may not need at that time. For example, Instagram made a concerted effort to improve the web performance of instagram.com, resulting in a nearly 50% cumulative improvement in feed page load time. A key area of focus has been shipping less JavaScript code to users, particularly on the critical rendering path.The Instagram team found that the uncompressed size of JavaScript is more important for performance than the compressed size, as larger uncompressed bundles take more time to parse and execute on the client, especially on mobile devices. Two optimizations they implemented to reduce JS parse/execute time were inline requires (only executing code when its first used vs. eagerly on initial load) and serving ES2017+ code to modern browsers to avoid transpilation overhead. Inline requires improved Time-to-Interactive metrics by 12%, and the ES2017+ bundle was 5.7% smaller and 3% faster than the transpiled version.While good progress has been made, the Instagram team acknowledges there are still many opportunities for further optimization. Potential areas to explore could include the following:Improved code-splitting, moving more logic off the critical path,Optimizing scrolling performance,Adapting to varying network conditions,Modularizing their Redux state management.Continued efforts will be needed to keep instagram.com performing well as new features are added and the product grows in complexity.Accessibility IntegrationAccessibility should be an integral part of the product development process, not an afterthought.Wixs comprehensive approach to accessibility, encompassing keyboard navigation, screen reader support, and infrastructure for future development, showcases the importance of building inclusivity into the products core. By considering accessibility requirements from the initial design stages and involving accessibility experts throughout the development process, Wix was able to create a platform that empowered its users to build accessible websites. This holistic approach to accessibility not only benefited end-users but also positioned Wix as a leader in inclusive web design, attracting a wider user base and fostering a culture of empathy and inclusivity within the organization.Developer Experience InvestmentInvesting in a positive developer experience is essential for attracting and retaining talent, fostering productivity, and accelerating development.Apidecks case study in the book highlights the impact of a great developer experience on community building and product velocity. By providing well-documented APIs, intuitive SDKs, and comprehensive developer resources, Apideck was able to cultivate a thriving developer community. This investment in developer experience not only made it easier for developers to integrate with Apidecks platform but also fostered a sense of collaboration and knowledge sharing within the community. As a result, ApiDeck was able to accelerate product development, leverage community contributions, and continuously improve its offering based on developer feedback.Leveraging Performance Optimization TechniquesAchieving optimal performance is a critical aspect of scaling success. The case studies in Success at Scale showcase various performance optimization techniques that have proven effective.Progressive Enhancement and Graceful DegradationBuilding resilient web experiences that perform well across a range of devices and network conditions requires a progressive enhancement approach. Pinafores case study in Success at Scale highlights the benefits of ensuring core functionality remains accessible even in low-bandwidth or JavaScript-constrained environments.By leveraging server-side rendering and delivering a usable experience even when JavaScript fails to load, Pinafore demonstrates the importance of progressive enhancement. This approach not only improves performance and resilience but also ensures that the application remains accessible to a wider range of users, including those with older devices or limited connectivity. By gracefully degrading functionality in constrained environments, Pinafore provides a reliable and inclusive experience for all users.Adaptive Loading StrategiesThe books case study on Tinder highlights the power of sophisticated adaptive loading strategies. By dynamically adjusting the content and resources delivered based on the users device capabilities and network conditions, Tinder ensures a seamless experience across a wide range of devices and connectivity scenarios. Tinders adaptive loading approach involves techniques like dynamic code splitting, conditional resource loading, and real-time network quality detection. This allows the application to optimize the delivery of critical resources, prioritize essential content, and minimize the impact of poor network conditions on the user experience.By adapting to the users context, Tinder delivers a fast and responsive experience, even in challenging environments.Efficient Resource ManagementEffective management of resources, such as images and third-party scripts, can significantly impact performance. eBays journey showcases the importance of optimizing image delivery, leveraging techniques like lazy loading and responsive images to reduce page weight and improve load times.By implementing lazy loading, eBay ensures that images are only loaded when they are likely to be viewed by the user, reducing initial page load time and conserving bandwidth. Additionally, by serving appropriately sized images based on the users device and screen size, eBay minimizes the transfer of unnecessary data and improves the overall loading performance. These resource management optimizations, combined with other techniques like caching and CDN utilization, enable eBay to deliver a fast and efficient experience to its global user base.Continuous Performance MonitoringRegularly monitoring and analyzing performance metrics is crucial for identifying bottlenecks and opportunities for optimization. The case study on Yahoo! Japan News demonstrates the impact of continuous performance monitoring, using tools like Lighthouse and real user monitoring to identify and address performance issues proactively.By establishing a performance monitoring infrastructure, Yahoo! Japan News gains visibility into the real-world performance experienced by their users. This data-driven approach allows them to identify performance regression, pinpoint specific areas for improvement, and measure the impact of their optimizations. Continuous monitoring also enables Yahoo! Japan News to set performance baselines, track progress over time, and ensure that performance remains a top priority as the application evolves.Embracing Accessibility and Inclusive DesignCreating inclusive web experiences that cater to diverse user needs is not only an ethical imperative but also a critical factor in scaling success. The case studies in Success at Scale emphasize the importance of accessibility and inclusive design.Comprehensive Accessibility TestingEnsuring accessibility requires a combination of automated testing tools and manual evaluation. LinkedIns approach to automated accessibility testing demonstrates the value of integrating accessibility checks into the development workflow, catching potential issues early, and reducing the reliance on manual testing alone.By leveraging tools like Deques axe and integrating accessibility tests into their continuous integration pipeline, LinkedIn can identify and address accessibility issues before they reach production. This proactive approach to accessibility testing not only improves the overall accessibility of the platform but also reduces the cost and effort associated with retroactive fixes. However, LinkedIn also recognizes the importance of manual testing and user feedback in uncovering complex accessibility issues that automated tools may miss. By combining automated checks with manual evaluation, LinkedIn ensures a comprehensive approach to accessibility testing.Inclusive Design PracticesDesigning with accessibility in mind from the outset leads to more inclusive and usable products. Success With Scale\s case study on Intercom about creating an accessible messenger highlights the importance of considering diverse user needs, such as keyboard navigation and screen reader compatibility, throughout the design process.By embracing inclusive design principles, Intercom ensures that their messenger is usable by a wide range of users, including those with visual, motor, or cognitive impairments. This involves considering factors such as color contrast, font legibility, focus management, and clear labeling of interactive elements. By designing with empathy and understanding the diverse needs of their users, Intercom creates a messenger experience that is intuitive, accessible, and inclusive. This approach not only benefits users with disabilities but also leads to a more user-friendly and resilient product overall.User Research And FeedbackEngaging with users with disabilities and incorporating their feedback is essential for creating truly inclusive experiences. The Understoods journey emphasizes the value of user research and collaboration with accessibility experts to identify and address accessibility barriers effectively. By conducting usability studies with users who have diverse abilities and working closely with accessibility consultants, The Understood gains invaluable insights into the real-world challenges faced by their users. This user-centered approach allows them to identify pain points, gather feedback on proposed solutions, and iteratively improve the accessibility of their platform.By involving users with disabilities throughout the design and development process, The Understood ensures that their products not only meet accessibility standards but also provide a meaningful and inclusive experience for all users.Accessibility As A Shared ResponsibilityPromoting accessibility as a shared responsibility across the organization fosters a culture of inclusivity. Shopifys case study underscores the importance of educating and empowering teams to prioritize accessibility, recognizing it as a fundamental aspect of the user experience rather than a mere technical checkbox.By providing accessibility training, guidelines, and resources to designers, developers, and content creators, Shopify ensures that accessibility is considered at every stage of the product development lifecycle. This shared responsibility approach helps to build accessibility into the core of Shopifys products and fosters a culture of inclusivity and empathy. By making accessibility everyones responsibility, Shopify not only improves the usability of their platform but also sets an example for the wider industry on the importance of inclusive design.Fostering A Culture of Collaboration And Knowledge SharingScaling success requires a culture that promotes collaboration, knowledge sharing, and continuous learning. The case studies in Success at Scale highlight the impact of effective collaboration and knowledge management practices.Cross-Functional CollaborationBreaking down silos and fostering cross-functional collaboration accelerates problem-solving and innovation. Airbnbs design system journey showcases the power of collaboration between design and engineering teams, leading to a cohesive and scalable design language across web and mobile platforms.By establishing a shared language and a set of reusable components, Airbnbs design system enables designers and developers to work together more efficiently. Regular collaboration sessions, such as design critiques and code reviews, help to align both teams and ensure that the design system evolves in a way that meets the needs of all stakeholders. This cross-functional approach not only improves the consistency and quality of the user experience but also accelerates the development process by reducing duplication of effort and promoting code reuse.Knowledge Sharing And DocumentationCapturing and sharing knowledge across the organization is crucial for maintaining consistency and enabling the efficient onboarding of new team members. Stripes investment in internal frameworks and documentation exemplifies the value of creating a shared understanding and facilitating knowledge transfer.By maintaining comprehensive documentation, code examples, and best practices, Stripe ensures that developers can quickly grasp the intricacies of their internal tools and frameworks. This documentation-driven culture not only reduces the learning curve for new hires but also promotes consistency and adherence to established patterns and practices. Regular knowledge-sharing sessions, such as tech talks and lunch-and-learns, further reinforce this culture of learning and collaboration, enabling team members to learn from each others experiences and stay up-to-date with the latest developments.Communities Of PracticeEstablishing communities of practice around specific domains, such as accessibility or performance, promotes knowledge sharing and continuous improvement. Shopifys accessibility guild demonstrates the impact of creating a dedicated space for experts and advocates to collaborate, share best practices, and drive accessibility initiatives forward.By bringing together individuals passionate about accessibility from across the organization, Shopifys accessibility guild fosters a sense of community and collective ownership. Regular meetings, workshops, and hackathons provide opportunities for members to share their knowledge, discuss challenges, and collaborate on solutions. This community-driven approach not only accelerates the adoption of accessibility best practices but also helps to build a culture of inclusivity and empathy throughout the organization.Leveraging Open Source And External ExpertiseCollaborating with the wider developer community and leveraging open-source solutions can accelerate development and provide valuable insights. Pinafores journey highlights the benefits of engaging with accessibility experts and incorporating their feedback to create a more inclusive and accessible web experience.By actively seeking input from the accessibility community and leveraging open-source accessibility tools and libraries, Pinafore was able to identify and address accessibility issues more effectively. This collaborative approach not only improved the accessibility of the application but also contributed back to the wider community by sharing their learnings and experiences. By embracing open-source collaboration and learning from external experts, teams can accelerate their own accessibility efforts and contribute to the collective knowledge of the industry.The Path To Sustainable SuccessAchieving scalable success in the web development landscape requires a multifaceted approach that encompasses the right mindset, strategic decision-making, and continuous learning. The Success at Scale book provides a comprehensive exploration of these elements, offering deep insights and practical guidance for teams at all stages of their scaling journey.By cultivating a user-centric, data-driven, and inclusive mindset, teams can prioritize the needs of their users and make informed decisions that drive meaningful results. Adopting a culture of continuous improvement and collaboration ensures that teams are always striving to optimize and refine their products, leveraging the collective knowledge and expertise of their members.Making strategic technology choices, such as selecting performance-oriented frameworks and investing in developer experience, lays the foundation for scalable and maintainable architectures. Implementing performance optimization techniques, such as adaptive loading, efficient resource management, and continuous monitoring, helps teams deliver fast and responsive experiences to their users.Embracing accessibility and inclusive design practices not only ensures that products are usable by a wide range of users but also fosters a culture of empathy and user-centricity. By incorporating accessibility testing, inclusive design principles, and user feedback into the development process, teams can create products that are both technically sound and meaningfully inclusive.Fostering a culture of collaboration, knowledge sharing, and continuous learning is essential for scaling success. By breaking down silos, promoting cross-functional collaboration, and investing in documentation and communities of practice, teams can accelerate problem-solving, drive innovation, and build a shared understanding of their products and practices.The case studies featured in Success at Scale serve as powerful examples of how these principles and strategies can be applied in real-world contexts. By learning from the successes and challenges of industry leaders, teams can gain valuable insights and inspiration for their own scaling journeys.As you embark on your path to scaling success, remember that it is an ongoing process of iteration, learning, and adaptation. Embrace the mindsets and strategies outlined in this article, dive deeper into the learnings from the Success at Scale book, and continually refine your approach based on the unique needs of your users and the evolving landscape of web development.ConclusionScaling successful web products requires a holistic approach that combines technical excellence, strategic decision-making, and a growth-oriented mindset. By learning from the experiences of industry leaders, as showcased in the Success at Scale book, teams can gain valuable insights and practical guidance on their journey towards sustainable success.Cultivating a user-centric, data-driven, and inclusive mindset lays the foundation for scalability. By prioritizing the needs of users, making informed decisions based on data, and fostering a culture of continuous improvement and collaboration, teams can create products that deliver meaningful value and drive long-term growth.Making strategic decisions around technology choices, performance optimization, accessibility integration, and developer experience investment sets the stage for scalable and maintainable architectures. By leveraging proven optimization techniques, embracing inclusive design practices, and investing in the tools and processes that empower developers, teams can build products that are fast and resilient.Through ongoing collaboration, knowledge sharing, and a commitment to learning, teams can navigate the complexities of scaling success and create products that make a lasting impact in the digital landscape. Were Trying Out Something NewIn an effort to conserve resources here at Smashing, were trying something new with Success at Scale. The printed book is 304 pages, and we make an expanded PDF version available to everyone who purchases a print book. This accomplishes a few good things:We will use less paper and materials because we are making a smaller printed book;Well use fewer resources in general to print, ship, and store the books, leading to a smaller carbon footprint; andKeeping the book at more manageable size means we can continue to offer free shipping on all Smashing orders!Smashing Books have always been printed with materials from FSC Certified forests. We are committed to finding new ways to conserve resources while still bringing you the best possible reading experience. Community Matters Producing a book takes quite a bit of time, and we couldnt pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for the kind, ongoing support. The eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy. Just sayin! ;-)More Smashing Books & GoodiesPromoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing.In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books that stand the test of time. Heather and Steven are two of these people. Have you checked out their books already?Understanding PrivacyEverything you need to know to put your users first and make a better web.Get Print + eBookTouch Design for Mobile InterfacesLearn how touchscreen devices really work and how people really use them.Get Print + eBookInterface Design Checklists100 practical cards for common interface design challenges.Get Print + eBook

Theres an artist in everyone. Some bring their ideas to life with digital tools, others capture the perfect moment with a camera or love to grab pen and paper to create little doodles or pieces of lettering. And even if you think youre far from being an artist, well, it might just be hidden deep inside of you. So why not explore it?For more than 13 years already, our monthly wallpapers series has been the perfect opportunity to do just that: to break out of your daily routine and get fully immersed in a creative little project. This month was no exception, of course.In this post, youll find beautiful, unique, and inspiring wallpapers designed by creative folks who took on the challenge. All of them are available in versions with and without a calendar for June 2024 and can be downloaded for free. As a little bonus goodie, we also added a selection of June favorites from our archives that are just too good to be forgotten. Thank you to everyone who shared their designs with us this month! Happy June!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.KittenDesigned by Design Studio from India.previewwith calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440without calendar: 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Celebrate National Tropic DayToday, lets dive into the lush wonders of the tropics! From breathtaking landscapes to tantalizing flavors, National Tropic Day is a celebration of all things tropical. Join us in honoring the vibrant cultures and biodiversity that make these regions so unique. Get ready to embark on a tropical adventure! 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, 2560x1440All-Seeing EyeDesigned 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, 3840x2160Grand Canyon In JuneJune arrives, and with it, summer. The endless afternoons, the heat and all those moments to enjoy and rest, because, even if we are working, in summer everything is seen with different eyes. This year, we are going to the Grand Canyon of Colorado to admire the beauty of its landscapes and enjoy its sunsets. Designed by Veronica Valenzuela Jimenez from Spain.previewwith calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440without calendar: 640x480, 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1440, 2560x1440SplashDesigned 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, 3840x2160What Is GreenWhen June arrives, its the best moment of the year for the photosynthesis (in the north). Most of the plants are in green colors. I like to play with colors and computers. This picture comes out of my imagination. Its like looking with an electronic microscope at a strange green structure. Designed by Philippe Brouard from France.previewwith calendar: 1024x768, 1366x768, 1600x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3840x2160without calendar: 1024x768, 1366x768, 1600x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440, 2560x1600, 2880x1800, 3840x2160Back In My DaysDesigned 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, 3840x2160Create Your Own PathNice weather has arrived! Clean the dust off your bike and explore your hometown from a different angle! Invite a friend or loved one and share the joy of cycling. Whether you decide to go for a city ride or a ride in nature, the time spent on a bicycle will make you feel free and happy. So dont wait, take your bike and call your loved one because happiness is greater only when it is shared. Happy World Bike Day! 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, 2560x1440Summer CozinessIve waited for this summer more than I waited for any other summer since I was a kid. I dream of watermelon, strawberries, and lots of colors. Designed by Kate Jameson from the United States.previewwithout calendar: 320x480, 1024x1024, 1280x720, 1680x1200, 1920x1080, 2560x1440Summer SurfSummer vibes Designed by Antun Hirsman from Croatia.previewwithout calendar: 640x480, 1152x864, 1280x1024, 1440x900, 1680x1050, 1920x1080, 1920x1440, 2650x1440Strawberry FieldsDesigned by Nathalie Ouederni from France.previewwithout calendar: 320x480, 1024x768, 1280x1024, 1440x900, 1680x1200, 1920x1200, 2560x1440Deep DiveSummer rains, sunny days, and a whole month to enjoy. Dive deep inside your passions and let them guide you. Designed by Ana Masnikosa from Belgrade, Serbia.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Join The WaveThe month of warmth and nice weather is finally here. We found inspiration in the World Oceans Day which occurs on June 8th and celebrates the wave of change worldwide. Join the wave and dive in! Designed by 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, 2560x1440Summer PartyDesigned 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, 3840x2160Oh, The Places You Will Go!In celebration of high school and college graduates ready to make their way in the world! Designed by Bri Loesch from the United States.previewwithout calendar: 320x480, 1024x768, 1280x1024, 1440x900, 1680x1050, 1680x1200, 1920x1440, 2560x1440Ice Creams Away!Summer is taking off with some magical ice cream hot air balloons. Designed by Sasha Endoh from Canada.previewwithout calendar: 320x480, 1024x768, 1152x864, 1280x800, 1280x960, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1920x1080, 1920x1200, 2560x1440Merry-Go-RoundDesigned by Xenia Latii from Germany.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Nine LivesI grew up with cats around (and drawing them all the time). They are so funny one moment they are being funny, the next they are reserved. If you have place in your life for a pet, adopt one today! Designed by Karen Frolo from the United States.previewwithout calendar: 1024x768, 1024x1024, 1280x800, 1280x960, 1280x1024, 1366x768, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Solstice SunsetJune 21 marks the longest day of the year for the Northern Hemisphere and sunsets like these will be getting earlier and earlier after that! Designed by James Mitchell from the United Kingdom.previewwithout calendar: 1280x720, 1280x800, 1366x768, 1440x900, 1680x1050, 1920x1080, 1920x1200, 2560x1440, 2880x1800Travel TimeJune is our favorite time of the year because the keenly anticipated sunny weather inspires us to travel. Stuck at the airport, waiting for our flight but still excited about wayfaring, we often start dreaming about the new places we are going to visit. Where will you travel to this summer? Wherever you go, we wish you a pleasant journey! Designed by 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, 2560x1440BauhausI created a screenprint of one of the most famous buildings from the Bauhaus architect Mies van der Rohe for you. So, enjoy the Barcelona Pavillon for your June wallpaper. Designed by Anne Korfmacher from Germany.previewwithout calendar: 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Pineapple Summer PopI love creating fun and feminine illustrations and designs. I was inspired by juicy tropical pineapples to celebrate the start of summer. Designed by Brooke Glaser from Honolulu, Hawaii.previewwithout calendar: 640x480, 800x600, 1024x768, 1152x720, 1280x720, 1280x800, 1280x960, 1366x768, 1440x900, 1680x1050, 1920x1080, 1920x1200, 1920x1440, 2560x1440Melting AwayDesigned by Ricardo Gimenes from Sweden.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1366x768, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440The Kids Looking OutsideThese are my cats looking out of the window. Because it is Childrens Day in June in a lot of countries, I chose to make a wallpaper with this photo of my cats. The cats are like kids, they always want to play and love to be outside! Also, most kids love cats! Designed by Kevin van Geloven from the Netherlands.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x1024, 1440x900, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Expand Your HorizonsIts summer! Go out, explore, expand your horizons! Designed by Dorvan Davoudi from Canada.previewwithout calendar: 800x480, 800x600, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1366x768, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1080, 1920x1200, 1920x1440, 2560x1440Ice Cream JuneFor me, June always marks the beginning of summer! The best way to celebrate summer is of course ice cream, what else? Designed by Tatiana Anagnostaki from Greece.previewwithout calendar: 1024x768, 1280x1024, 1440x900, 1680x1050, 1680x1200, 1920x1440, 2560x1440Sunset In JamaicaPhoto from a recent trip to Jamaica edited to give a retro look and feel. Designed by Tommy Digiovanni from the United States.previewwithout calendar: 320x480, 1024x768, 1024x1024, 1280x720, 1280x800, 1680x1050, 1920x1080, 1920x1200, 2560x1440Flamingood Vibes OnlyI love flamingos! They give me a happy feeling that I want to share with the world. Designed by Melissa Bogemans from Belgium.previewwithout calendar: 320x480, 640x480, 800x480, 800x600, 1024x768, 1024x1024, 1152x864, 1280x720, 1280x800, 1280x960, 1280x1024, 1400x1050, 1440x900, 1600x1200, 1680x1050, 1680x1200, 1920x1200, 1920x1440, 2560x1440Knitting For SummerI made multiple circles overlapping with close distances. The overall drawing looks like a clothing texture, for something you could wear in coming summer. Lets have a nice summer. Designed by Philippe Brouard from France.previewwithout calendar: 800x480, 1024x768, 1280x720, 1280x800, 1440x900, 1600x1200, 1920x1080, 1920x1200, 2560x1440, 2880x1800

Lately, Ive been thinking about the basics of web development. Actually, Ive been thinking about them for some time now, at least since I started teaching beginning web development in 2020.Im fascinated by the basics. Theyre an unsung hero, really, as there is no developer worth their salt who would be where they are without them. Yet, they often go unnoticed.The basics exist in some sort of tension between the utmost importance and the incredibly banal.You might even think of them as the vegetable side on your dinner plate wholesome but perhaps bland without the right seasoning.Who needs the basics of HTML and CSS, some say, when we have tools that abstract the way theyre written and managed? We now have site builders that require no technical knowledge. We have frameworks with enough syntactic sugar to give your development chops a case of cavities. We have libraries packed with any number of pre-established patterns that can be copy-pasted without breaking a sweat. The need to learn the basics of HTML and CSS is effectively null when the number of tools that exist to supplant them is enough to fill a small galaxy of stars.Rachel Andrew wrote one of my all-time favorite posts back in 2019, equating the rise of abstractions with an increase in complexity and a profound loss of inroads for others to enter the web development field:We have already lost many of the entry points that we had. We dont have the forums of parents teaching each other HTML and CSS, in order to make a family album. Those people now use Facebook or perhaps run a blog on wordpress.com or SquareSpace with a standard template. We dont have people customising their MySpace profile or learning HTML via Neopets. We dont have the people, usually women, entering the industry because they needed to learn HTML during that period when an organisations website was deemed part of the duties of the administrator. Rachel Andrew, HTML, CSS and our vanishing industry entry pointsTheres no moment more profound in my web development career than the time I changed the background color of a page from default white to some color value I cant remember (but know for a fact it would never be dodgerblue). That, and my personal a-ha! moment when realizing that everything in CSS is a box. Nothing guided me with the exception of View Source, and Id bet the melting Chapstick in my pocket that youre the same if you came up around the turn of the 21st century.Where do you go to learn HTML and CSS these days? Even now, there are few dedicated secondary education programs (or scholarships, for that matter) to consider. We didnt have bootcamps back in the day, but you dont have to toss a virtual stone across many pixels to find one today.There are excellent and/or free tutorials, too. Here, Ill link a few of em up for you:Learn HTML / Learn CSS by web.devGetting Start With the Web by MDNHTML & CSS Crash Course by Kevin PowellIntroduction to HTML and CSS by The Odin ProjectLearn HTML / Learn CSS by W3DocsLets not even get into the number of YouTube tutorials. But if you do, no one beats Kevins incredible archive of recorded gems.Anyway, my point is that there are more resources than ever for learning web development, but still painfully few entry points to get there. The resources we have for learning the basics are great, but many are either growing stale, are quick hits without a clear learning path, or assume the learner has at least some technical knowledge. I can tell you, as someone who has hit the Publish button on thousands of front-end tutorials, that the vast majority if not all of them are geared toward those who are already on the career path.It was always a bit painful when someone would email CSS-Tricks asking where to get started learning CSS because, well, youd imagine CSS-Tricks being the perfect home for something like that, and yet, theres nothing. Its just the reality, even if many of us (myself included) cut our chops with sites like CSS-Tricks, Smashing Magazine, and A List Apart. We were all learning together at that time, or so it seemed.What we need are more pathways for deep learning.Learning Experience Design (LXD) is a real thing that Id position somewhere between what we know as UX Design and the practice of accessibility. Theres a focus on creating delightful experiences, sure, but the real aim of LDX is to establish learning paths that universally account for different types of learners (e.g., adults and children) and learning styles (e.g., visual and experiential). According to LDX, learners have a set of needs not totally unlike those that Maslows hierarchy of needs identifies for all humans, and there are different models for determining those needs, perhaps none more influential than Blooms Taxonomy.These are things that many front-end tutorials, bootcamps, videos, and programs are not designed for. Its not that the resources are bad (nay, most are excellent); its that they are serving different learners and learning types than what a day-one beginner needs. And lets please not rely on AI to fill the gaps in human experiences!Like I said, Ive been thinking about this a lot. Like, a lot a lot. In fact, I recently published an online course purely dedicated to learning the basics of front-end development, creatively named TheBasics.dev. Id like to think its not just another tutorial because its a complete set of lessons that includes reading, demonstrations, videos, lab exercises, and assessments, i.e., a myriad of ways to learn. Id also like to think that this is more than just another bootcamp because it is curricula designed with the intention to develop new knowledge through reflective practices, peer learning, and feedback.Anyway, Im darn proud of The Basics, even if Im not exactly the self-promoting type, and writing about it is outside of my comfort zone. If youre reading this, its very likely that you, too, work on the front end. The Basics isnt for you exactly, though Id argue that brushing up on fundamentals is never a bad thing, regardless of your profession, but especially in front-end development, where standards are well-documented but ever-changing as well.Visit The BasicsThe Basics is more for your clients who do not know how to update the website they paid you to make. Or the friend whos learning but still keeps bugging you with questions about the things theyre reading. Or your mom, who still has no idea what it is you do for a living. Its for those whom the entry points are vanishing. Its for those who could simply sign up for a Squarespace account but want to actually understand the code it spits out so they have more control to make a site that uniquely reflects them.If you know a person like that, I would love it if youd share The Basics with them.Long live the basics! Long live the a-ha! moments that help us all fall in love with the World Wide Web.

How do you know what UI component to choose? Decision trees offer a systematic approach for design teams to document their design decisions. Once weve decided what UI components we use and when, we can avoid never-ending discussions, confusion, and misunderstanding.Lets explore a few examples of decision trees for UI components and how we can get the most out of them.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.B2B Navigation and Help Components: DoctolibDoctolib Design System is a very impressive design system with decision trees, B2B navigation paths, photography, PIN input, UX writing, and SMS notifications and thorough guides on how to choose UI components.B2B Navigation Patterns Decision TreeForm Components Decision TreeActions and Calls To Actions Decision TreeError Design Decision TreeHelp Component Decision TreeI love how practical these decision trees are. Each shows an example of what a component looks like, but I would also add references to real-life UI examples and flows of where and how these components are used. A fantastic starting point that documents design decisions better than any guide would.Decision Trees For UI Components: WorkdayThe team behind Workdays Canvas design system created a fantastic set of design decision trees for notifications, errors and alerts, loading patterns, calls to action, truncation, and overflow with guidelines, examples, and use cases, which can now only be retrieved from the archive:Notifications Decision TreeErrors and Alerts Decision TreeLoading UX Decision TreeCalls to Action Decision TreeTruncation and Overflow Decision TreeFor each decision tree, the Workday team has put together a few context-related questions to consider first when making a decision before even jumping into the decision tree. Plus, there are thorough examples for each option available, as well as a very detailed alternative text for every image.Form Components Decision Tree: LyftA choice of a form component can often be daunting. When should you use radio buttons, checkboxes, or dropdowns? Runi Goswami from Lyft has shared a detailed form components decision tree that helps their team choose between form controls.We start by exploring whether a user can select more than one option in our UI. If its indeed multi-select, we use toggles for short options and checkboxes for longer ones.If only one option can be selected, then we use tabs for filtering, radios for shorter options, a switch for immediately applicable options, and a checkbox if only one option can be selected. Dropdowns are used as a last resort.Choosing Onboarding Components: NewsKitOnboarding comes in various forms and shapes. Depending on how subtle or prominent we want to highlight a particular feature, we can use popovers, badges, hints, flags, toasts, feature cards, or design a better empty state. The Newskit team has put together an Onboarding Selection Prototype in Figma.The choice depends on whether we want to interrupt the users to display details (usually isnt very effective), show a feature subtly during the experience (more effective), or enable discovery by highlighting a feature within the context of a task a user tries to accomplish.The toolkit asks a designer a couple of questions about the intent of onboarding, and then suggests options that are likely to perform best a fantastic little helper for streamlined onboarding decisions.Design System Process Flowcharts: NucleusHow do you decide to add a new component to a design system or rather extend an existing one? Whats the process for contributions, maintenance, and the overall design process? Some design teams codify their design decisions as design system process flowcharts, as shown below.Contribution Process at British GasContributing Guidelines at NordhealthProcesses at AvivaContribution Process at OpenCollectiveContribution Process at ZalandoAnd here are helpful decision trees for adding new components to a design system:New Component Decision Tree at Boston ScientificHandling New Patterns at GitHubDesign System Governance Process by Brad FrostNew Component Decision Tree by Louis OuriachDesign System Contribution Template by Chad BergmanHow To Launch A New Component + Figma template by Rama Krushna BeheraMake Decision Trees VisibleWhat I absolutely love about the decision tree approach is not only that it beautifully visualizes design decisions but that it also serves as a documentation. It establishes shared standards across teams and includes examples to follow, with incredible value for new hires.Of course, exceptions happen. But once you have codified the ways of working for design teams as a decision tree and made it front and center of your design work, it resolves never-ending discussions about UI decisions for good.So whenever a debate comes up, document your decisions in a decision tree. Turn them into posters. Place them in kitchen areas and developers and QA workspaces. Put them in design critique rooms. Make them visible where design work happens and where code is being written.Its worth mentioning that every project will need its own custom trees, so please see the examples above as an idea to build upon and customize away for your needs.Meet 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.

This article is a sponsored by NetlifyIn the past, the web ecosystem moved at a very slow pace. Developers would go years without a new language feature or working around a weird browser quirk. This pushed our technical leaders to come up with creative solutions to circumvent the platforms shortcomings. We invented bundling, polyfills, and transformation steps to make things work everywhere with less of a hassle.Slowly, we moved towards some sort of consensus on what we need as an ecosystem. We now have TypeScript and Vite as clear preferencespushing the needle of what it means to build consistent experiences for the web. Application frameworks have built whole ecosystems on top of them: SolidStart, Nuxt, Remix, and Analog are examples of incredible tools built with such primitives. We can say that Vite and TypeScript are tooling primitives that empower the creation of others in diverse ecosystems.With bundling and transformation needs somewhat defined, it was only natural that framework authors would move their gaze to the next layer they needed to abstract: the server.Server PrimitivesThe UnJS folks have been consistently building agnostic tooling that can be reused in different ecosystems. Thanks to them, we now have frameworks and libraries such as H3 (a minimal Node.js server framework built with TypeScript), which enables Nitro (a whole server runtime powered by Vite, and H3), that in its own turn enabled Vinxi (an application bundler and server runtime that abstracts Nitro and Vite). Nitro is used already by three major frameworks: Nuxt, Analog, and SolidStart. While Vinxi is also used by SolidStart. This means that any platform which supports one of these, will definitely be able to support the others with zero additional effort.This is not about taking a bigger slice of the cake. But making the cake bigger for everyone.Frameworks, platforms, developers, and users benefit from it. We bet on our ecosystem together instead of working in silos with our monolithic solutions. Empowering our developer-users to gain transferable skills and truly choose the best tool for the job with less vendor lock-in than ever before.Serverless Rejoins ConversationSuch initiatives have probably been noticed by serverless platforms like Netlify. With Platform Primitives, frameworks can leverage agnostic solutions for common necessities such as Incremental Static Regeneration (ISR), Image Optimization, and key/value (kv) storage.As the name implies, Netlify Platform Primitives are a group of abstractions and helpers made available at a platform level for either frameworks or developers to leverage when using their applications. This brings additional functionality simultaneously to every framework. This is a big and powerful shift because, up until now, each framework would have to create its own solutions and backport such strategies to compatibility layers within each platform.Moreover, developers would have to wait for a feature to first land on a framework and subsequently for support to arrive in their platform of choice. Now, as long as theyre using Netlify, those primitives are available directly without any effort and time put in by the framework authors. This empowers every ecosystem in a single measure.Serverless means server infrastructure developers dont need to handle. Its not a misnomer, but a format of Infrastructure As A Service.As mentioned before, Netlify Platform Primitives are three different features:Image CDNA content delivery network for images. It can handle format transformation and size optimization via URL query strings.CachingBasic primitives for their server runtime that help manage the caching directives for browser, server, and CDN runtimes smoothly.BlobsA key/value (KV) storage option is automatically available to your project through their SDK.Lets take a quick dive into each of these features and explore how they can increase our productivity with a serverless fullstack experience.Image CDNEvery image in a /public can be served through a Netlify function. This means its possible to access it through a /.netlify/images path. So, without adding sharp or any image optimization package to your stack, deploying to Netlify allows us to serve our users with a better format without transforming assets at build-time. In a SolidStart, in a few lines of code, we could have an Image component that transforms other formats to .webp. import { type JSX } from "solid-js";const SITE_URL = "https://example.com";interface Props extends JSX.ImgHTMLAttributes<HTMLImageElement> { format?: "webp" | "jpeg" | "png" | "avif" | "preserve"; quality?: number | "preserve";}const getQuality = (quality: Props["quality"]) => { if (quality === "preserve") return""; return &q=${quality || "75"};};function getFormat(format: Props["format"]) { switch (format) { case "preserve": return" "; case "jpeg": return &fm=jpeg; case "png": return &fm=png; case "avif": return &fm=avif; case "webp": default: return &fm=webp; }}export function Image(props: Props) { return ( <img {...props} src={${SITE_URL}/.netlify/images?url=/${props.src}${getFormat( props.format )}${getQuality(props.quality)}} /> );}Notice the above component is even slightly more complex than bare essentials because were enforcing some default optimizations. Our getFormat method transforms images to .webp by default. Its a broadly supported format thats significantly smaller than the most common and without any loss in quality. Our get quality function reduces the image quality to 75% by default; as a rule of thumb, there isnt any perceivable loss in quality for large images while still providing a significant size optimization.Check our little component at play.Source code: SolidStart and Netlify Primitives.CachingBy default, Netlify caching is quite extensive for your regular artifacts - unless theres a new deployment or the cache is flushed manually, resources will last for 365 days. However, because server/edge functions are dynamic in nature, theres no default caching to prevent serving stale content to end-users. This means that if you have one of these functions in production, chances are theres some caching to be leveraged to reduce processing time (and expenses).By adding a cache-control header, you already have done 80% of the work in optimizing your resources for best serving users. Some commonly used cache control directives:{ "cache-control": "public, max-age=0, stale-while-revalidate=86400"}public: Store in a shared cache.max-age=0: resource is immediately stale.stale-while-revalidate=86400: if the cache is stale for less than 1 day, return the cached value and revalidate it in the background.{ "cache-control": "public, max-age=86400, must-revalidate"}public: Store in a shared cache.max-age=86400: resource is fresh for one day.must-revalidate: if a request arrives when the resource is already stale, the cache must be revalidated before a response is sent to the user.Note: For more extensive information about possible compositions of Cache-Control directives, check the mdn entry on Cache-Control.The cache is a type of key/value storage. So, once our responses are set with proper cache control, platforms have some heuristics to define what the key will be for our resource within the cache storage. The Web Platform has a second very powerful header that can dictate how our cache behaves.The Vary response header is composed of a list of headers that will affect the validity of the resource (method and the endpoint URL are always considered; no need to add them). This header allows platforms to define other headers defined by location, language, and other patterns that will define for how long a response can be considered fresh.The Vary response header is a foundational piece of a special header in Netlify Caching Primitive. The Netlify-Vary will take a set of instructions on which parts of the request a key should be based. It is possible to tune a response key not only by the header but also by the value of the header.query: vary by the value of some or all request query parameters.header: vary by the value of one or more request headers.language: vary by the languages from the Accept-Language header.country: vary by the country inferred from a GeoIP lookup on the request IP address.cookie: vary by the value of one or more request cookie keys.This header offers strong fine-control over how your resources are cached. Allowing for some creative strategies to optimize how your app will perform for specific users.Blob StorageThis is a highly-available key/value store, its ideal for frequent reads and infrequent writes. Theyre automatically available and provisioned for any Netlify Project.Its possible to write on a blob from your runtime or push data for a deployment-specific store. For example, this is how an Action Function would register a number of likes in store with SolidStart.import { getStore } from "@netlify/blobs";import { action } from "@solidjs/router";export const upVote = action(async (formData: FormData) => { "use server"; const postId = formData.get("id"); const postVotes = formData.get("votes"); if (typeof postId !== "string" || typeof postVotes !== "string") return; const store = getStore("posts"); const voteSum = Number(postVotes) + 1) await store.set(postId, String(voteSum); console.log("done"); return voteSum});Check @netlify/blobs API documentation for more examples and use-cases.Final ThoughtsWith high-quality primitives, we can enable library and framework creators to create thin integration layers and adapters. This way, instead of focusing on how any specific platform operates, it will be possible to focus on the actual user experience and practical use-cases for such features. Monoliths and deeply integrated tooling make sense to build platforms fast with strong vendor lock-in, but thats not what the community needs. Betting on the web platform is a more sensible and future-friendly way.Let me know in the comments what your take is about unbiased tooling versus opinionated setups!

The web is no stranger to taking HTML elements and transforming them to look, act, and feel like something completely different. A common example of this is the switch, or toggle, component. We would hide a checkbox beneath several layers of styles, define the ARIA role as switch, and then ship. However, this approach posed certain usability issues around indeterminate states and always felt rather icky. After all, as the saying goes, the best ARIA is no ARIA.Well, there is new hope for a native HTML switch to catch on.Safari Technology Preview (TP) 185 and Safari 17.4 released with an under-the-radar feature, a native HTML switch control. It evolves from the hidden-checkbox approach and aims to make the accessibility and usability of the control more consistent.<!-- This will render a native checkbox --//><input type="checkbox" /><!-- Add the switch attribute to render a switch element --//><input type="checkbox" switch /><input type="checkbox" checked switch />Communication is one aspect of the controls accessibility. Earlier in 2024, there were issues where the switch would not adjust to page zoom levels properly, leading to poor or broken visibility of the control. However, at the time I am writing this, Safari looks to have resolved these issues. Zooming retains the visual cohesion of the switch.The switch attribute seems to take accessibility needs into consideration. However, this doesnt prevent us from using it in inaccessible and unusable ways. As mentioned, mixing the required and indeterminate properties between switches and checkboxes can cause unexpected behavior for people trying to navigate the controls. Once again, Adrian sums things up nicely:The switch role does not allow mixed states. Ensure your switch never gets set to a mixed state; otherwise, well, problems. Adrian RoselliInternationalization (I18N): Which Way Is On?Beyond the accessibility of the switch control, what happens when the switch interacts with different writing modes?When creating the switch, we had to ensure the use of logical CSS to support different writing modes and directions. This is because a switch being in its right-most position (or inline ending edge) doesnt mean on in some environments. In some languages e.g., those that are written right-to-left the left-most position (or inline starting edge) on the switch would likely imply the on state.While we should be writing logical CSS by default now, the new switch control removes that need. This is because the control will adapt to its nearest writing-mode and direction properties. This means that in left-to-right environments, the switchs right-most position will be its on state, and in right-to-left environments, its left-most position will be the on state.See the Pen Safari Switch Control - Styling [forked] by @DanielYuschick.Final ThoughtsAs we continue to push the web forward, its natural for our tools to evolve alongside us. The switch control is a welcome addition to HTML for eliminating the checkbox hacks weve been resorting to for years.That said, combining the checkbox and switch into a single input, while being convenient, does raise some concerns about potential markup combinations. Despite this, I believe this can ultimately be resolved with linters or by the browsers themselves under the hood. Ultimately, having a native approach to switch components can make the accessibility and usability of the control far more consistent assuming its ever supported and adopted for widespread use.

Naming is hard. As designers and developers, we often struggle finding the right name for a design token, colors, UI components, HTML classes, and variables. Sometimes, the names we choose are too generic, so its difficult to understand what exactly is meant. And sometimes they are too specific, leaving little room for flexibility and re-use.In this post, we want to get to the bottom of this and explore how we can make naming more straightforward. How do we choose the right names? And which naming conventions work best? Lets take a closer look.Inspiration For NamingIf youre looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames is a wonderful resource jam-packed with ideas that get you thinking outside the box.The site provides thematically grouped lists of words perfect for naming. Youll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of words that wouldnt instantly come to ones mind when it comes to code, among them words from nature, art, theater, music, architecture, fashion, and publishing.Naming ConventionsWhat makes a good name? Javier Cuello summarized a set of naming best practices that help you name your layers, groups and components in a consistent and scalable way.As Javier points out, a good name has a logical structure, is short, meaningful, and known by everyone, and not related to visual properties. He shares dos and donts to illustrate how to achieve that and also takes a closer look at all the fine little details you need to consider when naming sizes, colors, groups, layers, and components.Design Tokens Naming PlaybookHow do you name and manage design tokens? To enhance your design tokens naming skills, Romina Kavcic created an interactive Design Tokens Naming Playbook. It covers everything from different approaches to naming structure to creating searchable databases, running naming workshops, and automation.The playbook also features a naming playground where you can play with names simply by dragging and dropping. For more visual examples, also be sure to check out the Figma template. It includes components for all categories, allowing you to experiment with different naming structures.Flexible Design Token TaxonomyHow to build a flexible design token taxonomy that works across different products? That was the challenge that the team at Intuit faced. The parent company of products such as Mailchimp, Quickbooks, TurboTax, and Mint developed a flexible token system that goes beyond the brand theme to serve as the foundational system for a wide array of products.Nate Baldwin wrote a case study in which he shares valuable insights into the making of Intuits design token taxonomy. It dives deeper into the pain points of the old taxonomy system, the criteria they defined for the new system, and how it was created. Lots of takeaways for building your own robust and flexible token taxonomy are guaranteed.Naming ColorsWhen youre creating a color system, you need names for all its facets and uses. Names that everyone on the team can make sense of. But how to achieve that? How do you bring logic to a subjective topic like color? Jess Satell, Staff Content Designer for Adobes Spectrum Design System, shares how they master the challenge.As Jess explains, the Spectrum color nomenclature uses a combination of color family classifier (e.g., blue or gray) paired with an incremental brightness value scale (50900) to name colors in a way that is not only logical for everyone involved but also scalable and flexible as the system grows.Another handy little helper when it comes to naming colors is Color Parrot. The Twitter bot is capable of naming and identifying the colors in any given image. Just mention the bot in a reply, and it will respond with a color palette.Common Names For UI ComponentsLooking at what other people call similar things is a great way to start when youre struggling with naming. And what better source could there be than other design systems? Before you end up in the design system rabbit hole, Iain Bean did the research for you and created the Component Gallery.The Component Gallery is a collection of interface components from real-world design systems. It includes plenty of examples for more than 50 UI components from accordion to visually hidden and also lists other names that the UI components go by. A fantastic resource not only with regards to naming.Variables Taxonomy MapA wonderful example of naming guidelines for a complex multi-brand, multi-themed design system comes from the Vodafone UK Design System team. Their Variables Taxonomy Map breaks down the anatomy and categorization of a design token into a well-orchestrated system of collections.The map illustrates four collections required to support the system and connections between tokens from brand and primitives to semantics and pages. It builds on top of Nathan Curtis work on naming design tokens and enables everyone to gather insight about where a token is used and what it represents, just from its name.If you want to explore more approaches to naming design tokens, Vitaly compiled a list of useful Figma kits and resources that are worth checking out.Design Token Names InventoryRomina Kavcic created a handy little resource that is bound to give your design token naming workflow a power boost. The Design Token Names Inventory spreadsheet not only makes it easy to ensure consistent naming but also syncs directly to Figma.The spreadsheet has a simple structure with four levels to give you a birds-eye view of all your design tokens. You can easily add rows, themes, and modes without losing track and filter your tokens. And while the spreadsheet itself is already a great solution to keep everyone involved on the same page, it plays out its real strength in combination with the Google Spreadsheets plugin or the Kernel plugin. Once installed, the changes you make in the spreadsheet are reflected in Figma. A real timesaver!Want To Dive Deeper?We hope these resources will come in handy as you tackle naming. If youd like to dive deeper into design tokens, components, and design systems, we have a few friendly online workshops and SmashingConfs coming up:Design Token and UI Component Architecture with Nathan Curtis, June 614Creating and Maintaining Successful Design Systems with Brad Frost, Aug 27 Sept 10Figma Workflow Masterclass with Christina Vallaure, Nov 1422SmashingConf Freiburg 2024 The Web, Sep 911SmashingConf New York 2024 Front-End & UX, Oct 710SmashingConf Antwerp 2024 Design & UX, Oct 2831Wed be absolutely delighted to welcome you to one of our special Smashing experiences be it online or in person!

Establishing layouts in CSS is something that we, as developers, often delegate to whatever framework were most comfortable using. And even though its possible to configure a framework to get just what we need out of it, how often have you integrated an entire CSS library simply for its layout features? Im sure many of us have done it at some point, dating back to the days of 960.gs, Bootstrap, Susy, and Foundation.Modern CSS features have significantly cut the need to reach for a framework simply for its layout. Yet, I continue to see it happen. Or, I empathize with many of my colleagues who find themselves re-creating the same Grid or Flexbox layout over and over again.In this article, we will gain greater control over web layouts. Specifically, we will create four CSS classes that you will be able to take and use immediately on just about any project or place where you need a particular layout that can be configured to your needs.While the concepts we cover are key, the real thing I want you to take away from this is the confidence to use CSS for those things we tend to avoid doing ourselves. Layouts used to be a challenge on the same level of styling form controls. Certain creative layouts may still be difficult to pull off, but the way CSS is designed today solves the burdens of the established layout patterns weve been outsourcing and re-creating for many years.What Were MakingWere going to establish four CSS classes, each with a different layout approach. The idea is that if you need, say, a fluid layout based on Flexbox, you have it ready. The same goes for the three other classes were making.And what exactly are these classes? Two of them are Flexbox layouts, and the other two are Grid layouts, each for a specific purpose. Well even extend the Grid layouts to leverage CSS Subgrid for when thats needed.Within those two groups of Flexbox and Grid layouts are two utility classes: one that auto-fills the available space were calling these fluid layouts and another where we have greater control over the columns and rows were calling these repeating layouts.Finally, well integrate CSS Container Queries so that these layouts respond to their own size for responsive behavior rather than the size of the viewport. Where well start, though, is organizing our work into Cascade Layers, which further allow you to control the level of specificity and prevent style conflicts with your own CSS.Setup: Cascade Layers & CSS VariablesA technique that Ive used a few times is to define Cascade Layers at the start of a stylesheet. I like this idea not only because it keeps styles neat and organized but also because we can influence the specificity of the styles in each layer by organizing the layers in a specific order. All of this makes the utility classes were making easier to maintain and integrate into your own work without running into specificity battles.I think the following three layers are enough for this work:@layer reset, theme, layout;Notice the order because it really, really matters. The reset layer comes first, making it the least specific layer of the bunch. The layout layer comes in at the end, making it the most specific set of styles, giving them higher priority than the styles in the other two layers. If we add an unlayered style, that one would be added last and thus have the highest specificity.Related: Getting Started With Cascade Layers by Stephanie Eckles.Lets briefly cover how well use each layer in our work.Reset LayerThe reset layer will contain styles for any user agent styles we want to reset. You can add your own resets here, or if you already have a reset in your project, you can safely move on without this particular layer. However, do remember that un-layered styles will be read last, so wrap them in this layer if needed.Im just going to drop in the popular box-sizing declaration that ensures all elements are sized consistently by the border-box in accordance with the CSS Box Model.@layer reset { *, *::before, *::after { box-sizing: border-box; } body { margin: 0; }}Theme LayerThis layer provides variables scoped to the :root element. I like the idea of scoping variables this high up the chain because layout containers like the utility classes were creating are often wrappers around lots of other elements, and a global scope ensures that the variables are available anywhere we need them. That said, it is possible to scope these locally to another element if you need to.Now, whatever makes for good default values for the variables will absolutely depend on the project. Im going to set these with particular values, but do not assume for a moment that you have to stick with them this is very much a configurable system that you can adapt to your needs.Here are the only three variables we need for all four layouts:@layer theme { :root { --layout-fluid-min: 35ch; --layout-default-repeat: 3; --layout-default-gap: 3vmax; }}In order, these map to the following:Automatically-sized columns that are at least 35 characters wide,A layout with three repeated columns, andA gap between the layout items that is set to 3% of the largest side of the viewport.Notice: The variables are prefixed with layout-, which Im using as an identifier for layout-specific values. This is my personal preference for structuring this work, but please choose a naming convention that fits your mental model naming things can be hard!Layout LayerThis layer will hold our utility class rulesets, which is where all the magic happens. For the grid, we will include a fifth class specifically for using CSS Subgrid within a grid container for those possible use cases. @layer layout { .repeating-grid {} .repeating-flex {} .fluid-grid {} .fluid-flex {} .subgrid-rows {}}Now that all our layers are organized, variables are set, and rulesets are defined, we can begin working on the layouts themselves. We will start with the repeating layouts, one based on CSS Grid and the other using Flexbox.Repeating Grid And Flex LayoutsI think its a good idea to start with the simplest layout and scale up the complexity from there. So, well tackle the Repeating Grid layout first as an introduction to the overarching technique we will be using for the other layouts.Repeating GridIf we head into the @layout layer, thats where well find the .repeating-grid ruleset, where well write the styles for this specific layout. Essentially, we are setting this up as a grid container and applying the variables we created to it to establish layout columns and spacing between them..repeating-grid { display: grid; grid-template-columns: repeat(var(--layout-default-repeat), 1fr); gap: var(--layout-default-gap);}Its not too complicated so far, right? We now have a grid container with three equally sized columns that take up one fraction (1fr) of the available space with a gap between them.This is all fine and dandy, but we do want to take this a step further and turn this into a system where you can configure the number of columns and the size of the gap. Im going to introduce two new variables scoped to this grid:--_grid-repeat: The number of grid columns.--_repeating-grid-gap: The amount of space between grid items.Did you notice that Ive prefixed these variables with an underscore? This was actually a JavaScript convention to specify variables that are private or locally-scoped before we had const and let to help with that. Feel free to rename these however you see fit, but I wanted to note that up-front in case youre wondering why the underscore is there..repeating-grid { --_grid-repeat: var(--grid-repeat, var(--layout-default-repeat)); --_repeating-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat(var(--layout-default-repeat), 1fr); gap: var(--layout-default-gap);}Notice: These variables are set to the variables in the @theme layer. I like the idea of assigning a global variable to a locally-scoped variable. This way, we get to leverage the default values we set in @theme but can easily override them without interfering anywhere else the global variables are used.Now lets put those variables to use on the style rules from before in the same .repeating-grid ruleset:.repeating-grid { --_grid-repeat: var(--grid-repeat, var(--layout-default-repeat)); --_repeating-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat(var(--_grid-repeat), 1fr); gap: var(--_repeating-grid-gap);}What happens from here when we apply the .repeating-grid to an element in HTML? Lets imagine that we are working with the following simplified markup:<section class="repeating-grid"> <div></div> <div></div> <div></div></section>If we were to apply a background-color and height to those divs, we would get a nice set of boxes that are placed into three equally-sized columns, where any divs that do not fit on the first row automatically wrap to the next row.Time to put the process we established with the Repeating Grid layout to use in this Repeating Flex layout. This time, we jump straight to defining the private variables on the .repeating-flex ruleset in the @layout layer since we already know what were doing..repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap));}Again, we have two locally-scoped variables used to override the default values assigned to the globally-scoped variables. Now, we apply them to the style declarations..repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap)); display: flex; flex-wrap: wrap; gap: var(--_repeating-flex-gap);}Were only using one of the variables to set the gap size between flex items at the moment, but that will change in a bit. For now, the important thing to note is that we are using the flex-wrap property to tell Flexbox that its OK to let additional items in the layout wrap into multiple rows rather than trying to pack everything in a single row.But once we do that, we also have to configure how the flex items shrink or expand based on whatever amount of available space is remaining. Lets nest those styles inside the parent ruleset:.repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap)); display: flex; flex-wrap: wrap; gap: var(--_repeating-flex-gap); > * { flex: 1 1 calc((100% / var(--_flex-repeat)) - var(--_gap-repeater-calc)); }}If youre wondering why Im using the universal selector (*), its because we cant assume that the layout items will always be divs. Perhaps they are <article> elements, <section>s, or something else entirely. The child combinator (>) ensures that were only selecting elements that are direct children of the utility class to prevent leakage into other ancestor styles.The flex shorthand property is one of those thats been around for many years now but still seems to mystify many of us. Before we unpack it, did you also notice that we have a new locally-scoped --_gap-repeater-calc variable that needs to be defined? Lets do this:.repeating-flex { --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat)); --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap)); /* New variables */ --_gap-count: calc(var(--_flex-repeat) - 1); --_gap-repeater-calc: calc( var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count) ); display: flex; flex-wrap: wrap; gap: var(--_repeating-flex-gap); > * { flex: 1 1 calc((100% / var(--_flex-repeat)) - var(--_gap-repeater-calc)); }}Whoa, we actually created a second variable that --_gap-repeater-calc can use to properly calculate the third flex value, which corresponds to the flex-basis property, i.e., the ideal size we want the flex items to be.If we take out the variable abstractions from our code above, then this is what were looking at:.repeating-flex { display: flex; flex-wrap: wrap; gap: 3vmax > * { flex: 1 1 calc((100% / 3) - calc(3vmax / 3 * 2)); }}Hopefully, this will help you see what sort of math the browser has to do to size the flexible items in the layout. Of course, those values change if the variables values change. But, in short, elements that are direct children of the .repeating-flex utility class are allowed to grow (flex-grow: 1) and shrink (flex-shrink: 1) based on the amount of available space while we inform the browser that the initial size (i.e., flex-basis) of each flex item is equal to some calc()-ulated value.Because we had to introduce a couple of new variables to get here, Id like to at least explain what they do:--_gap-count: This stores the number of gaps between layout items by subtracting 1 from --_flex-repeat. Theres one less gap in the number of items because theres no gap before the first item or after the last item.--_gap-repeater-calc: This calculates the total gap size based on the individual items gap size and the total number of gaps between items.From there, we calculate the total gap size more efficiently with the following formula:calc(var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count))Lets break that down further because its an inception of variables referencing other variables. In this example, we already provided our repeat-counting private variable, which falls back to the default repeater by setting the --layout-default-repeat variable.This sets a gap, but were not done yet because, with flexible containers, we need to define the flex behavior of the containers direct children so that they grow (flex-grow: 1), shrink (flex-shrink: 1), and with a flex-basis value that is calculated by multiplying the repeater by the total number of gaps between items.Next, we divide the individual gap size (--_repeating-flex-gap) by the number of repetitions (--_flex-repeat)) to equally distribute the gap size between each item in the layout. Then, we multiply that gap size value by one minus the total number of gaps with the --_gap-count variable.And that concludes our repeating grids! Pretty fun, or at least interesting, right? I like a bit of math.Before we move to the final two layout utility classes were making, you might be wondering why we want so many abstractions of the same variable, as we start with one globally-scoped variable referenced by a locally-scoped variable which, in turn, can be referenced and overridden again by yet another variable that is locally scoped to another ruleset. We could simply work with the global variable the whole time, but Ive taken us through the extra steps of abstraction.I like it this way because of the following:I can peek at the HTML and instantly see which layout approach is in use: .repeating-grid or .repeating-flex.It maintains a certain separation of concerns that keeps styles in order without running into specificity conflicts.See how clear and understandable the markup is:<section class="repeating-flex footer-usps"> <div></div> <div></div> <div></div></section>The corresponding CSS is likely to be a slim ruleset for the semantic .footer-usps class that simply updates variable values:.footer-usps { --flex-repeat: 3; --flex-gap: 2rem;}This gives me all of the context I need: the type of layout, what it is used for, and where to find the variables. I think thats handy, but you certainly could get by without the added abstractions if youre looking to streamline things a bit.Fluid Grid And Flex LayoutsAll the repeating weve done until now is fun, and we can manipulate the number of repeats with container queries and media queries. But rather than repeating columns manually, lets make the browser do the work for us with fluid layouts that automatically fill whatever empty space is available in the layout container. We may sacrifice a small amount of control with these two utilities, but we get to leverage the browsers ability to intelligently place layout items with a few CSS hints.Fluid GridOnce again, were starting with the variables and working our way to the calculations and style rules. Specifically, were defining a variable called --_fluid-grid-min that manages a columns minimum width.Lets take a rather trivial example and say we want a grid column thats at least 400px wide with a 20px gap. In this situation, were essentially working with a two-column grid when the container is greater than 820px wide. If the container is narrower than 820px, the column stretches out to the containers full width.If we want to go for a three-column grid instead, the containers width should be about 1240px wide. Its all about controlling the minimum sizing values in the gap..fluid-grid { --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min)); --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap));}That establishes the variables we need to calculate and set styles on the .fluid-grid layout. This is the full code we are unpacking: .fluid-grid { --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min)); --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap)); display: grid; grid-template-columns: repeat( auto-fit, minmax(min(var(--_fluid-grid-min), 100%), 1fr) ); gap: var(--_fluid-grid-gap);}The display is set to grid, and the gap between items is based on the --fluid-grid-gap variable. The magic is taking place in the grid-template-columns declaration.This grid uses the repeat() function just as the .repeating-grid utility does. By declaring auto-fit in the function, the browser automatically packs in as many columns as it possibly can in the amount of available space in the layout container. Any columns that cant fit on a line simply wrap to the next line and occupy the full space that is available there.Then theres the minmax() function for setting the minimum and maximum width of the columns. Whats special here is that were nesting yet another function, min(), within minmax() (which, remember, is nested in the repeat() function). This a bit of extra logic that sets the minimum width value of each column somewhere in a range between --_fluid-grid-min and 100%, where 100% is a fallback for when --_fluid-grid-min is undefined or is less than 100%. In other words, each column is at least the full 100% width of the grid container.The max half of minmax() is set to 1fr to ensure that each column grows proportionally and maintains equally sized columns.See the Pen Fluid grid [forked] by utilitybend.Thats it for the Fluid Grid layout! That said, please do take note that this is a strong grid, particularly when it is combined with modern relative units, e.g. ch, as it produces a grid that only scales from one column to multiple columns based on the size of the content.Fluid FlexWe pretty much get to re-use all of the code we wrote for the Repeating Flex layout for the Fluid Flex layout, but only were setting the flex-basis of each column by its minimum size rather than the number of columns..fluid-flex { --_fluid-flex-min: var(--fluid-flex-min, var(--layout-fluid-min)); --_fluid-flex-gap: var(--flex-gap, var(--layout-default-gap)); display: flex; flex-wrap: wrap; gap: var(--_fluid-flex-gap); > * { flex: 1 1 var(--_fluid-flex-min); }}That completes the fourth and final layout utility but theres one bonus class we can create to use together with the Repeating Grid and Fluid Grid utilities for even more control over each layout.Optional: Subgrid UtilitySubgrid is handy because it turns any grid item into a grid container of its own that shares the parent containers track sizing to keep the two containers aligned without having to redefine tracks by hand. Its got full browser support and makes our layout system just that much more robust. Thats why we can set it up as a utility to use with the Repeating Grid and Fluid Grid layouts if we need any of the layout items to be grid containers for laying out any child elements they contain.Here we go:.subgrid-rows { > * { display: grid; gap: var(--subgrid-gap, 0); grid-row: auto / span var(--subgrid-rows, 4); grid-template-rows: subgrid; }}We have two new variables, of course:--subgrid-gap: The vertical gap between grid items.--subgrid-rows The number of grid rows defaulted to 4.We have a bit of a challenge: How do we control the subgrid items in the rows? I see two possible methods.Method 1: Inline StylesWe already have a variable that can technically be used directly in the HTML as an inline style:<section class="fluid-grid subgrid-rows" style="--subgrid-rows: 4;"> <!-- items --></section>This works like a charm since the variable informs the subgrid how much it can grow.Method 2: Using The :has() Pseudo-ClassThis approach leads to verbose CSS, but sacrificing brevity allows us to automate the layout so it handles practically anything we throw at it without having to update an inline style in the markup.Check this out:.subgrid-rows { &:has(> :nth-child(1):last-child) { --subgrid-rows: 1; } &:has(> :nth-child(2):last-child) { --subgrid-rows: 2; } &:has(> :nth-child(3):last-child) { --subgrid-rows: 3; } &:has(> :nth-child(4):last-child) { --subgrid-rows: 4; } &:has(> :nth-child(5):last-child) { --subgrid-rows: 5; } /* etc. */ > * { display: grid; gap: var(--subgrid-gap, 0); grid-row: auto / span var(--subgrid-rows, 5); grid-template-rows: subgrid; }}The :has() selector checks if a subgrid row is the last child item in the container when that item is either the first, second, third, fourth, fifth, and so on item. For example, the second declaration:&:has(> :nth-child(2):last-child) { --subgrid-rows: 2; }is pretty much saying, If this is the second subgrid item and it happens to be the last item in the container, then set the number of rows to 2.Whether this is too heavy-handed, I dont know; but I love that were able to do it in CSS.The final missing piece is to declare a container on our children. Lets give the columns a general class name, .grid-item, that we can override if we need to while setting each one as a container we can query for the sake of updating its layout when it is a certain size (as opposed to responding to the viewports size in a media query).:is(.fluid-grid:not(.subgrid-rows),.repeating-grid:not(.subgrid-rows),.repeating-flex, .fluid-flex) { > * { container: var(--grid-item-container, grid-item) / inline-size; }}Thats a wild-looking selector, but the verbosity is certainly kept to a minimum thanks to the :is() pseudo-class, which saves us from having to write this as a larger chain selector. It essentially selects the direct children of the other utilities without leaking into .subgrid-rows and inadvertently selecting its direct children.The container property is a shorthand that combines container-name and container-type into a single declaration separated by a forward slash (/). The name of the container is set to one of our variables, and the type is always its inline-size (i.e., width in a horizontal writing mode).The container-type property can only be applied to grid containers not grid items. This means were unable to combine it with the grid-template-rows: subgrid value, which is why we needed to write a more complex selector to exclude those instances.DemoCheck out the following demo to see how everything comes together.See the Pen Grid system playground [forked] by utilitybend.The demo is pulling in styles from another pen that contains the full CSS for everything we made together in this article. So, if you were to replace the .fluid-flex classname from the parent container in the HTML with another one of the layout utilities, the layout will update accordingly, allowing you to compare them.Those classes are the following:.repeating-grid,.repeating-flex,.fluid-grid,.fluid-flex.And, of course, you have the option of turning any grid items into grid containers using the optional .subgrid-rows class in combination with the .repeating-grid and .fluid-grid utilities.Conclusion: Write Once And RepurposeThis was quite a journey, wasnt it? It might seem like a lot of information, but we made something that we only need to write once and can use practically anywhere we need a certain type of layout using modern CSS approaches. I strongly believe these utilities can not only help you in a bunch of your work but also cut any reliance on CSS frameworks that you may be using simply for its layout configurations.This is a combination of many techniques Ive seen, one of them being a presentation Stephanie Eckles gave at CSS Day 2023. I love it when people handcraft modern CSS solutions for things we used to work around. Stephanies demonstration was clean from the start, which is refreshing as so many other areas of web development are becoming ever more complex.After learning a bunch from CSS Day 2023, I played with Subgrid on my own and published different ideas from my experiments. Thats all it took for me to realize how extensible modern CSS layout approaches are and inspired me to create a set of utilities I could rely on, perhaps for a long time.By no means am I trying to convince you or anyone else that these utilities are perfect and should be used everywhere or even that theyre better than <framework-du-jour>. One thing that I do know for certain is that by experimenting with the ideas we covered in this article, you will get a solid feel of how CSS is capable of making layout work much more convenient and robust than ever.Create something out of this, and share it in the comments if youre willing Im looking forward to seeing some fresh ideas!