For web creators looking to add character, dimension or sophistication to a website, the mouse parallax effect delivers all three. And now that some web platforms, like Wix Studio, offer mouse parallax without the need to write any code, it’s a good idea to become better acquainted with it in order to maximize its full creative potential. In this article, we cover the fundamentals of mouse parallax web effect: first with a basic overview and brief history, and then with guidance on implementation. You’ll even hear directly from Wix’s WOW Team—the visual innovation team that created Wix Studio’s mouse-parallax feature—on how they use the effect in their designs. What is mouse parallax? Mouse parallax is a visual effect in which elements on a web page move as your cursor moves. This adds depth, dynamism and a three-dimensional feel to your site when viewed on a two-dimensional screen. Parallax sounds familiar, right? That’s because mouse parallax and scroll-based parallax are both popular website animations. The major difference between the two has to do with what triggers the movement: Mouse parallax responds to cursor movement, creating an immediate and direct interaction. Scroll-based parallax is triggered by scrolling and uses a predetermined speed to reveal content and tell a story. Here's how the mouse parallax effect typically works Base layer: The base layer remains stationary and serves as the reference point for the visitor's eyes. Front layers: One or more layers of elements (e.g., images, text, or other UI elements like decorative icons or shapes) are positioned on top of the base layer. Mouse movement detection: JavaScript in the site detects the movement of the user's mouse cursor on the page or screen. Parallax calculation: Based on the mouse cursor position, the script calculates the offset or movement values for each foreground layer. This calculation is used to show a parallax effect when the mouse moves. History of mouse parallax The history of mouse parallax is intertwined with the broader evolution of web technologies toward more dynamic and interactive user experiences. Let’s go back in time a bit. 1990s Remember the first websites you visited? Sites then were largely static, consisting of text and images with minimal interaction beyond hyperlink navigation. Then came CSS and JavaScript, and web designers could finally create more entertaining and engaging experiences. At that time, complex visual effects, like parallax, still required custom code. Even so, these languages led the way to more dynamic and visually compelling websites without compromising site performance. Early 2000s Parallax scrolling, which was already in use for decades in the entertainment and gaming industries, emerged on the web. Taking inspiration from games like Super Mario and animated films, designers started using scrollbar movement to trigger subtle changes within their site designs. At this point, 2D web designs on every PC now had depth. Somewhere along the way, mouse parallax was born. 2010s - today As web standards and capabilities evolved, new web platforms emerged that democratized and spread web creation. Even designers without coding knowledge could now implement complex visual effects. And today, web platforms like Wix Studio also make it even easier to add mouse parallax without needing to write a single line of code. Learn more about Wix Studio’s design capabilities. Of course, the rise of mouse-free, touch-screen devices—like smartphones and tablets— limits how many users can experience this effect. This is why it’s important to follow best practices when designing with mouse parallax in mind. Best practices for using mouse parallax effect Mouse parallax is versatile. It can be applied to small details or have a dominant presence on a page. But not all users or devices can handle the effect. These best practices will help you determine how to best use mouse parallax on your site. Add effects with purpose The mouse effects on your site could range from being on full blast, small and subtle, or somewhere in between. Whichever effect you choose should align with the goal of your site. For example, quiet and elegant effects would suit a law firm’s website, while bold and dominating effects would suit an art gallery’s website. “When working for a client,” advises Ziv Moshe, visual designer on Wix’s WOW Team, “you can make the user’s first landing on the page calm and playful by using the effect in the header, and then more of it in pauses between folds.” Just ensure that any effects fit with your client’s brand language and are discussed upfront so there are no unpleasant surprises. Plan your mouse effects from the beginning of your design flow It’s a common misconception that website effects and animations aren’t relevant until the site design is finished and it’s time to build. As a result, the elements on your web page may feel forced together rather than conceived together. With this in mind, “mouse parallax needs to serve the narrative of the website,” recommends Avital Santo, head of design at Wix’s WOW Team. “You need to know your audience—how much and for how long you can engage them—and decide accordingly which effects you will add.” Don’t let effects cause UX friction Minimizing friction is one of the core web design principles. Ensure that the mouse parallax effect does not hinder navigation, readability or the user journey. Keep in mind that using the effect “changes the website layout,” says Moshe, “and make sure there is enough white space around [the elements] for the animation. Use it practically and don’t distract the user.” The effect should enhance the content and functionality of your website, not overshadow it. Make sure your site accommodates users with reduced motion settings Some users have limitations, such as motion sickness, and might find websites with mouse parallax effects challenging or disorienting. Offer them the option to disable or adjust the intensity of the effects. Other users might exclusively navigate sites with a keyboard, instead of a mouse, so be sure that your web design works for them too. Adi Huri, creative director and product manager on Wix’s WOW Team, explains, “We work closely with the accessibility team when we are creating new features for Wix Studio. We developed [the mouse parallax feature] in such a way that people with disabilities can experience the content without the effects.” Anticipate touch-screen devices without cursors Since mouse parallax relies on cursor movement, consider an alternate approach for touch devices. “Because mouse parallax creates a fun, engaging and interactive experience, for mobile, I’d create a similar experience—like with loop animations,” says Moshe. When recreating this on Wix Studio, Moshe recommends “to place the element in a container in order to apply several animations to the same element—but not too many which could lead to bad performance on the browser.” In some cases touch-screen devices are not completely off-limits; users who connect an external mouse will still enjoy the mouse parallax experience. Mouse parallax effect case study: Mouse Parallax Goes to Wonderland To better understand how to introduce mouse parallax effects into your work, we spoke with the creators of Mouse Parallax Goes to Wonderland from Wix’s WOW Team. Why did you decide to use a mouse parallax in the first place? Adi Huri, creative director and product manager, WOW Team: Our ultimate goal was to improve user engagement and help visitors consume the content more easily. Before choosing mouse parallax, we explored the web, looking at various trends and taking them down to their essence to understand technical feasibility. It turned out that mouse parallax is very useful both from the user's point of view (easy to interact with) and from the tech's perspective (easy to add animations and effects). Why Alice in Wonderland? How does it benefit the story? Adi Huri: The goal was to show the magic of the feature with something that makes it pop. We decided to use mouse parallax because it adds an illusion of depth and layers. When an effect is introduced properly it supports the narrative of the product. Ziv Moshe, visual designer, WOW Team: Each section describes a different part of Alice’s story and leads the visitor to the following sections. We used the preset mouse effects to pull the visitor to interact with the site and to move through the story, as if unveiling the Alice mystery. And all this time the website is dynamic—the assets fly, spin and move following the user's mouse. What is your process of finding a balance between usability and accessibility? Adi Huri: It's essential to think about accessibility right from the start and work closely with the accessibility team when designing a product. Doing that will maximize the chances of creating a product everyone can use. When it comes to mouse parallax, visitors should have an option to minimize motion effects, and with reduced motion, mouse parallax won't appear on their screens. Why is it important to have mouse parallax as a code-free feature? Adi Huri: Having mouse parallax as a code-free feature is much more than just saving development time. It gives the joy of creation to anyone, no matter whether they have coding skills or not. When the process of creating a parallax effect is so smooth that it's barely noticeable, creators start to focus on the actual design solution rather than on technical details. Avital Santo, head of design, WOW Team: What I love most about mouse parallax on Wix Studio as a website designer is that it’s so easy to implement. And the site visitor gets playfulness and interactivity. It’s instant gratification from the site. Unlike other effects that need more planning and a better understanding of layout and motion, adding mouse effects requires nothing more than your creativity. How far can you push a code-free feature? Ziv Moshe: In more complex cases, we used two effects on the same element. For example, the Cheshire cat's eyes are separate PNGs that follow the mouse (using a “track” preset) while the cat's head is a group using the “airy” preset. Recreate this experience on Wix Studio—sign up for an account today. How to create a mouse parallax effect on Wix Studio Wix Studio offers a wide range of code-free animations and effects, and is unique in that no custom CSS or JavaScript is required. To add a mouse parallax effect in Wix Studio, you only need to select a specific object on the canvas, navigate to the Animations and Effects tab in the right sidebar and choose Mouse Effects. You can use various mouse effects, such as tracking, tilting, obscuring, resizing and more. First, select an effect, and Wix Studio will immediately add it to the element so you can preview it in real time. Then, adjust the controls and customize the effect properties, such as velocity and perspective. As a reminder, Wix Studio automatically disables mouse parallax on mobile. In other words, since mouse effects require a mouse cursor, they will not play on touchscreen devices. Try adding mouse parallax effects to your Wix Studio website with this tutorial. It'll guide you through the entire process step by step in an easy-to-follow way.

The Wix Studio design team has just returned from OFFF Barcelona 2024, and even though the event only ran for three days, there were plenty of takeaways to inspire us all year long. Shir Berkovitz, brand design team lead for Wix Studio, has attended the events for the last few years and finds inspiration in the “new techniques, on-site collaborations and new relationships that continue even after the event is over.” Whether or not you were able to attend this year’s event (or even if you did, perhaps you were busy running in circles like a kid in a candy store), this OFFF Barcelona 2024 recap brings you the top lessons we learned from some of the most creative minds. 01. The most memorable sites are designed by feelings, not by formulas. When making sites for clients day in and day out, it's common to use a formula that makes your work process more efficient. But too much of the formula creates a sea of similar-looking sites. Browsing the web “you see lots of sites and portfolios,” Berkovitz reflects, “but you will remember the one site that’s different and has something surprising—even if it’s something small.” Designers can follow the example of Talia Cotton, formerly of Pentagram, who founded her own creative agency and design consultancy called Cotton in New York. Playfulness and surprise—not traditional web best practices—drive Cotton’s creativity. Cotton uses this approach to create on-site experiences that visitors don’t want to leave, at least not until they’ve finished having their fun. Two examples we love: Talia's personal portfolio first appears as very traditional, highly structured and even conservative. But move your cursor or scroll down the page and immediately a playful and whimsical experience takes hold. Elegantly fusing business with artistry and code, it’s a style that’s consistent across Cotton’s body of work. Arrive at the site for the architecture and design practice Almost Studio (created by Cotton) and you are invited to play. The call-to-action “DRAW” is just one of multiple playful moments throughout the site, emblematic of Cotton’s creative coding approach. And yet, this mechanic is more than a creative element. It expresses the essence of the brand itself. To draw, create and reveal are at the heart of Almost Studio’s practice, and for a moment, visitors can share in the joy of their work and mission. Though at OFFF Barcelona, Cotton elaborated on her use of code—describing her approach as “purposeful design work with code”—these days, it’s not necessary for designers to write custom code to achieve a similar experience. Inspired by Cotton’s techniques, web creators can turn to platforms like Wix Studio for a range of immersive, no-code design capabilities that include scroll effects, mouse effects, hover effects and more. What can you do? On your next site project, lead with emotion. What do you want your visitors to feel or which feeling best represents your brand? This way, from the get-go, you can choose the styles and effects that best deliver this. Create a site on Wix Studio using code-free animations and effects. 02. The physical world is the most engaging screen, even more than the screens in our pockets. With Covid trending downward and screen time trending upward, it’s natural that crowds are eager to fill up public spaces for disruptive, larger-than-life entertainment experiences. And for creators, this means the canvas is bigger than ever: Moment Factory makes it clear that public spaces are their canvas of choice, declaring, “We do it in public” as their tagline. Employing video, sound, lighting and technology, the studio projects three-dimensional, 360-degree immersive experiences in and on public spaces—notably AURA Invalides at (or rather, on) Les Invalides in Paris. Each curve, pillar and negative space of the 17th-century building is treated like a screen. At times the video and light projections pay homage to the historic architecture, while at other times they dominate the space in a delirious and flamboyant spectacle. The Museum of the Future in Dubai sounds like a contradiction—using its physical space to display the not-yet-physical future. But seeing that we’re already accustomed to AI, cryptocurrencies and lab-grown meat, how much of the future will be physical anyway? At the museum, visitors can wander through an immersive environment of neon lights, 3D galactic projections and glowing operation panels. Each interaction with the museum’s digital content carries a meaningful lesson on future technologies, specimens and ecosystems. Armed with this knowledge, there’s hope that visitors—and potentially the wider human race—will feel more connected to our future world and its preservation. What can you do? As demonstrated in the examples above, find a new interpretation of your goal or design. “Guidelines shouldn’t be closed,” Berkovitz suggests, “they should be dynamic.” Consider how you can use new styles to evolve your brand, or new technologies to engage your audience beyond the typical web browsers, social feeds and streaming platforms. 03. Nothing impresses digital creatives like physical, handmade designs. For a while now, we’ve seen the growth of online designs inspired by offline styles, such as handwriting fonts and cutout collages. At OFFF Barcelona, we met creators who have gone one step further by taking one step back, and who eschew digital tools in favor of get-your-hands-dirty, fully physical creation. For some of us, the handmade approach is nostalgic (flashback to Sesame Street and Wallace and Gromit). But for others—in particular, creators who were trained to use software and computers from the get-go—it’s a shifting mindset in favor of tactile production. Netherlands-based studios Studio Mals and Setreset Films specialize in stop motion animation and lift the hood on their handmade production process. Visit their websites or Instagram pages and you’ll see the craftsmanship that brings everything to life—from sewing and spraying, to assembling and hanging. At OFFF Barcelona 2024, the duo debuted a short film (and shared some behind-the-scenes shots) that excited us about what’s possible when we ditch trackpads for our bare hands. “When you see the handmade details and all the physical elements of the video’s entire process, you’re reminded of another way to create. Their process spanned multiple categories of creation: writing, sculpting, building, filming, editing and beyond. We were all really excited by their video,” recalls Berkovitz. What can you do? Look up from your screens and explore the offline world for inspiration, materials and techniques. What would you discover if you closed your laptop and began your next wireframe with pen and paper? What new color could you create by mixing paints instead of plugging in hex numbers? 04. It’s ok to use AI (as part of your process). Countless creative professionals are sharing their positive experiences about using AI as part of their workflow. But it’s important to remember that AI is a human-centric tool—it will only be as good as your prompts, and, as Berkovitz confirms, “it’s up to you [the designer] to add your own layers and influence” to create a fully formed design. Vincent Schwenk, a 3D artist from Hamburg, Germany, shared how he uses visual AI as a starting point and then takes the reins to develop his projects further. To date, Schwenk has been very transparent about his fascination and concerns with AI. On Instagram, he documents his experience using Midjourney to replicate his own designs—and the outcome is reassuring. The resulting images bear a resemblance to Schwenk’s work and can serve as a starting point for more development. But they are far from finished and lack the originality, spontaneity and depth of their original counterparts. Ultimately, AI does not compete or replace human creativity, it simply assists. What can you do? Try one of the myriad AI tools out there, whether it’s an AI tool for web design or AI for creativity and ideation. You can even build a custom GPT that you can use repeatedly. The bottom line is that these tools are here. They aren’t going to disappear, and even the most experienced creatives are using them for impressive results. Start now with AI tools on Wix Studio that generate website images, responsive layouts, SEO tags and more.

Couch versus sofa, soda versus pop, typeface versus font—they’re the same thing, right? Well, not all of them. Sure, the first two examples might be synonymous, but there’s a difference between typefaces and fonts: the latter is stylistic variation of the former. And while confusing the two terms won’t make or break the quality of your web design projects, it can be useful to know the difference (and the various classifications and styles of each). Not only will this help you stay on top of industry jargon, but it can help you to precisely articulate your creative vision to your colleagues and peers. With that in mind, let’s go over the differences between a typeface and a font, a brief history of both, and whether or not knowing this distinction really matters for web design. Typeface vs. font The words “typeface” and “font” are typically thought of as synonymous, but they actually refer to different things. While a typeface describes a particular style of lettering, a font refers to variations of a typeface, like its size and weight. The simplest way to understand this difference is that a typeface is a set of fonts with common aesthetic qualities. Let’s break this down even further. What is a typeface? Typically, what we refer to as a font is actually a typeface. That is, Times New Roman, Helvetica, and Arial are not actually fonts—they’re typefaces. Essentially, a typeface is the set of design features that characterize a particular style of lettering. This may include the presence (or lack) of a serif; the relative height, spacing and width of the letters; and any other aesthetic embellishments, like expressive swashes or tiny counters. There are several different type classifications, including: Serif typefaces These are typefaces that include serifs, which are slight projections added to the ends of a stroke. In web design, this style tends to evoke a sophisticated and timeless feel. Perhaps the most obvious example of a serif typeface is Times New Roman. Classic and readable (but, arguably, without much character), it was originally designed in 1932 for The Times of London newspaper. Today, it’s still widely used in printed newspapers and news websites. You’ve also seen it as the default font on some of the older versions of Microsoft Word. (Expressive type has also evolved a lot since then.) Of course, as a web designer, Times New Roman probably isn’t your go-to. Georgia is another serif typeface that has more character and charm. Inspired by Scotch Roman typefaces of the 1800s, it was invented by Matthew Carter in 1993. A particularly elegant serif typeface is Linotype Dido. Its delicate old world style makes it one of the best fonts for digital publications and blogs: Sans serif typefaces A second classification of typeface is the sans serif typeface. As the name suggests, these are styles without the tails at the end of a stroke. While this style started developing in the 1800s, it wasn’t widely used until the 1920s and 1930s, when the Bauhaus movement embraced the sans serif as a reaction to the more embellished Art Noveau typefaces. It continues to be popular because it’s refreshingly clean, minimalist and bare, with a more relaxed and casual feel than serifs. Especially on mobile websites (whether designed with responsive web design or adaptive design technologies)—sans serif typefaces prove to be easier to read when perusing on a small screen. Helvetica, originally designed in Switzerland in 1957, is one of the most well known sans serif typefaces. It’s widely used for printed materials, websites, signage and corporate branding. In fact, Helvetica is everywhere—it’s the typeface for the Target and American Airlines logos, BMW, and the New York City subway system. It’s even the subject of research in a documentary film (aptly titled Helvetica). Then there’s the iconic sans serif typeface Futura, which was invented in 1927 by German type designer Paul Renner. Also based on the Bauhaus movement, it was praised for its functional geometry and stripped-down style. The book Never Use Futura argues that the font never went out of style—and, in fact, has only gained momentum with each new generation. More on making the most of typography. Bite into the history of the squishy sans serifs making scrolling sweeter Typeset a mood with the spookiest type in pop culture, from 'Psycho' to 'Suspiria' Get in on the psychedelic design trend with these groovy typefaces Open Sans, based on an earlier Google typeface called Droid Sans, is another widely used sans serif typeface. In fact, it ranks among the most popular Google Fonts with more than 1.5 trillion views in a year. Script typefaces A third kind of typeface is the script typeface, which is designed to look like cursive handwriting. This category includes creative designs like Clattering, a carefree brushstroke typeface and Barcelony, an elegant signature-style script. Decorative typefaces These experimental typefaces are decorative and fun. Because they’re highly embellished, they’re ornamental rather than practical. As such, they’re better off used for titles and headers rather than body text. These include Morris Troy, an Art Nouveau-style typeface, and Outlaw, a design evocative of the Wild West. Didone This typeface classification is a genre of the serif typeface. Didones are marked by thin, unbracketed serifs, thick vertical strokes, a contrast of bold and delicate lines, and ball terminal endings on some of the letters. Originating in the late 18th century in France, didones became popular in the 19th and early 20th centuries for newspaper headlines and advertisements. Thanks to their contrasting weights and elegant curves, these typefaces are refined, attention-grabbing, and easily readable. A popular type of didone is the fat face, a kind of didone marked by an extremely bold design. Take Abril Fatface, for example, or Quiche Fine Black, another stunning didone typeface. This high contrast style evokes drama and sophistication: Old Style Before we move on to fonts, let’s discuss one more typeface classification—Old Style typefaces. These are characterized by curved strokes with an axis that inclines to the left, as well as subtle contrast between thick and thin lines. A classic typeface in this category is ITC Berkeley Old Style, designed by Frederic W. Goudy in 1938 for the University of California, Berkeley. Another old style typeface is Bembo, which was inspired by a printed travelogue by the Renaissance Italian writer Pietro Bembo. What is a font? So, if all the examples in the previous section are typefaces, then what’s a font? A font is just a more specific way of defining the kind of text you’re using. It hones in on both the size and weight of a typeface. Let’s look at the typeface Helvetica Neue as an example: As you can see, there are lots of variations of Helvetica Neue (each assigned a different number). Each line in the image above—Helvetica Neue 25 Ultra Light, Helvetica Neue 35 Ultra Thin, Helvetica Neue 45 Light, and so on—represents a different font. These eight fonts are distinct because of their different weights, but they all lie within the same typeface: Helvetica Neue. (More on font sizes here.) In this way, a typeface is a broader term that encompasses all the possible versions of that particular design—whether it’s large, small, italic, bold, expanded or condensed. Here’s a breakdown of the ways that fonts of the same typeface can vary from one another: Size You know how titles and headings tend to be larger than body text? Technically, that makes them different fonts, even when the typeface is identical. That’s right—Garamond 12 pt and Garamond 16 pt are two distinct fonts. Weight The example of Helvetica Neue shows how fonts can be different by virtue of their weights, even when the typeface is the same. That is, Helvetica Neue 12 pt Light is a different font from Helvetica Neue 12 pt Bold, with the latter having incrementally thicker strokes. Letterform width Spacing further highlights the difference between typefaces versus fonts. As a web designer, you can get creative with typefaces by expanding or condensing them (creating more or less space between each letter). When you squish the letters together, you’re compressing them. When you space them far apart, you’re expanding them. There’s a whole range of letterform widths: compressed, condensed, semi-condensed, narrow, normal, extended, extra extended, and expanded. Just like font weights, different widths indicate different fonts. Italics Likewise, characters that are italicized versus roman represent different fonts. That means when I write “Do you like pizza?” versus “Do you like pizza?”, I’m changing the font of the word “you.” Typeface vs. font: A brief history Most of the time people talk about fonts, they’re really talking about typefaces. This colloquialism didn’t emerge by chance. We can, in part, thank Microsoft for making “font” the more popular term of the two. Since the earliest versions of Word in the late 1980s, they’ve labeled their list of typefaces “fonts,” catapulting the term into everyday vernacular. But the history of typefaces versus fonts goes even further back than that. The distinction has its origins in the history of printing. The word “font” itself comes from the Middle French word “fonte” of the late 16th century. This word denoted the action or process of casting in metal. During this period, printers needed to cast complete sets of letters in metal in order to make a font. Fonts with a common design were called a typeface. This would include the capital and lowercase versions of that particular design, as well as different sizes or weights. As you may suspect, manual typesetting involved a bit more work than simply hitting the keyboard. Typesetters needed to line up the individual blocks letter by letter to form a page layout. Once their layout was complete, they’d roll it with ink and press it onto paper to make prints. You can imagine how something so tedious would require meticulous organization. To make the job quick and efficient, each font was placed in a separate metal case (the capital letter case was typically placed above or behind the small letter case, which is where the terms “uppercase” and “lowercase” originated). Think about how frustrating it would be if different sizes and widths were all jumbled together! For typesetters, knowing where different fonts were located was critical to success. When web typography emerged centuries later, the terminology remained the same even as the old technology disappeared. But these days, the distinction is a bit outdated, at least on a practical level. In the computing world, it’s easy to scale a typeface to obtain any font of that style. A click of the mouse is all you need to create new sizes, weights, and more, because all that data is automatically saved to your font file. Why does this matter as a web designer? That brings us to the inevitable question: Is the typeface versus font distinction actually important? Is it just an example of snooty academic jargon, or can it have a tangible impact on your work as a web designer? Thierry Blancpain, a designer, art director, and co-founder of the type studio Grilli Type, doesn’t think that knowing specific terminology is essential to producing great work. He explains, “Every single person in the room will know what you mean no matter if you call it a typeface or a font. In the few cases where the distinction is truly relevant and could lead to problems down the line, you can easily communicate that in other ways.” Of course, knowing the right words helps you communicate these concepts more clearly. It can also help you better understand your colleagues and avoid grinding the gears of linguistic purists. But as Blancpain notes, being able to articulate differences like size and weight is far more important than knowing the proper terms. “We do think that the designer caring about typography is a very important aspect for the quality of a website,” he adds. The verdict? Your own knowledge of type—and your ability to prioritize it as an integral part of the web design process—is far more critical than the language you use. Still, a little vocab now and then can’t hurt. Subscribe to the FWD newsletter for more stories from industry experts in your inbox.

Tick tock. Tick tock. Is time running out for TikTok? It wouldn't be the first time we thought so. The possible ban of the social video app is (yet again) sending ripples through government halls worldwide, including in the United States and Germany. (Not to mention in India and Nepal where the app has already been fully banned for some time.) An all-out ban on TikTok could lie ahead, and some marketers and agencies are concerned. “Our clients reached out in droves,” says Dana Neujahr, managing director at socially led creative agency We Are Social + Narrative. “[They] want to make sure they aren’t investing in a platform if it isn’t sustainable long-term.” Yet, Neujahr and many other creative professionals are not panicking. On the contrary,  many are taking steps to make the most of TikTok while it’s still relevant, and only plan on adjusting their strategies if and when a ban is finalized. Among them is Timipre Maxwell, CEO and founder of influencer marketing company Kreate. “[A potential ban] doesn’t affect us because as marketers we are trained to look for attention,” he says. “The attention on the platform is what builds your brand. So if [brands] aren't able to reach audiences on this specific platform, it only makes sense that they will filter across to others.” We spoke with Neujahr, Maxwell and other experts in brand management, social media campaigns and influencer marketing. Based on their analyses of the TikTok dilemma, we learned how—even now—brands and agencies can sustain and strengthen their content and creator strategies. Subscribe to the FWD newsletter for fresh stories each week. 01. Keep going on TikTok—it's probably not going away soon. There is broad agreement that any changes to the status quo will take more than half a year to take effect, and that an immediate shift away from marketing on TikTok is premature and risky. “This is a developing situation that could take months to resolve. Brands should continue to create planned and reactive organic content for TikTok.” - Dana Neujahr, managing director, We Are Social + Narrative “We're still closing deals on TikTok. And I think I would only stop if and when the ban is real. We’ll still continue with TikTok for our target countries that are not the U.S.” - Sarah Adam, head of partnerships and influencer marketing, Wix Studio “Despite a slight slowdown in TikTok user growth YoY, it still hosts more than half of the U.S. population. [Now is] an opportunity for brands to capitalize on the transition period, by maintaining a presence on TikTok while others preemptively retreat. During this time, brands have an opportunity to secure a larger share of the audience and reach active users.” - Norel Mancuso, chief executive officer, Social House, Inc. “A brand has to keep posting on TikTok. You have to ignore everything that's going on and stay relevant because, at the end of the day, TikTok is still the platform that has the most attention on social [media] right now. You can't pull your content from this platform before [it is] banned because you would put yourself at a disadvantage.” - Timipre Maxwell, CEO and founder, Kreate The bottom line: Keep going with your TikTok activities. Create new content, engage with your audience and connect your fans to your other platforms. Use these next few months to gather insights—“It could also be an opportunity to understand who [your] engaged TikTok audiences are across brands and start to show up to those audiences in the other places they’re spending their time on social media,” notes Neujahr. 02. Get your footing across all the other content platforms. Even if TikTok is the preferred app of your target audience, it’s not the only place they’re consuming content. Established platforms are already making moves to grab their attention—like LinkedIn, which is already testing a new video feed—and it’s prime time for new platforms to swoop in and claim TikTok’s space. “A well-rounded approach to reaching audiences and communities across the right social platforms will almost always benefit brands more than going all in on only one platform.” - Dana Neujahr “It’s important to have a cross-channel plan. Target audiences use several platforms, so we need to meet them where they are and not be focused only on one. Don't have all your eggs in one basket.” - Sarah Adam “In the months following TikTok's ban in India, several Indian copycat apps emerged offering short-form video feeds, while Instagram and YouTube launched new short-form video functionality. What emerged from this was growth for Instagram and YouTube in the Indian market. It would be safe to assume that much of the spillover in brand advertising dollars would be reallocated to these American-based platforms.” - Norel Mancuso “Brands have an opportunity to branch out of the current trend of short videos and complement with platforms for live streaming that, although not new, continue to garner consistent viewership and usually help creators consolidate a more loyal audience. This can be on Twitch and Kick, for example.” - Alejandra Thomas, software engineer and content creator, @pikacodes (IG / X / TT) The bottom line: Strengthen your presence on platforms like Instagram, YouTube and X (formerly Twitter). Revisit Snapchat. Explore Reddit, Twitch or Kick. Be poised to greet your target audience wherever they end up next. 03. Develop your storytelling for long-term gains. Since TikTok launched globally in 2017, brands have constantly raced to "win" on the platform. But to maximize engagement or drive sales, brands have often relied on tricks and gimmicks—or in Mancuso's words, "‘viral’ trends and challenges"—at the expense of a deeper audience connection. So, in the days after TikTok, what will happen to the fanbase you built? What's the compelling, insightful narrative that keeps your fans engaged no matter the platform or creative format you use? “[The ban] may lead to the emergence of platforms emphasizing authentic engagement and community connections versus ‘viral’ trends and challenges, fostering new types of content creation.” - Norel Mancuso “With so many brands—big and small—taking a social-first approach to marketing, it is more important than ever to remember that social moves at the speed of culture, and is often driven by consumer behavior and sentiment. [Plan] for the unplanned by having a clear social north star, defined brand personality and strong understanding of the audiences and communities you want to reach.” - Dana Neujahr “Storytelling is the key to making connections. It makes your audience look forward to those videos just as much as the rest because the storytelling is just as enthralling.” - Alejandra Thomas “The only way as a brand to have success and to stay at the forefront of consumers’ minds over the next decade is to expand media reach and create really great, engaging content. You are competing with Netflix, Hulu and Disney+ right now.” - Timipre Maxwell The bottom line: Work with your teams or clients to create a brand storyline that goes deeper than the product. Use this to create content that users seek out beyond their app feeds. Looking for inspiration? Maxwell suggests Pretty Little Thing and Foot Asylum as brands who lead by example, with long-form content series that indulge their target audience’s entertainment needs over the brand’s sales needs. It’s a sure stamp of success that each long-form video exceeds 1 million views. 04. Prioritize channels that you can truly own. Previously, social platforms (like TikTok) were considered “owned” channels—the owner (i.e., the brand) controlled the content, the conversation and the experience. Algorithms—and now regulatory requirements—have upended that, making it essential for creators to update their mix of channels. “What a brand needs to be doing now is actually building community…that you can move to a third party place like a Discord, for example. So, if TikTok does get banned, you are now sending people from this platform to an owned community [where] you can push your content on [any] platform.” - Timipre Maxwell “Imagine you can involve an influencer to take over your newsletter, to host a webinar, to speak at your conference or run a workshop. There are endless things you could do on your own platforms.” - Sarah Adam The bottom line: Invest in channels and assets you can directly own—your content, your distribution, your data and your audience. Email marketing, forums on your domain and online events are just a few ways brands can build community and share content entirely on their own terms. 05. Take risks. Many of the best practices we follow today would’ve sounded preposterous 10 years ago—for example, it would’ve sounded ludicrous to put branded content creation in the hands of someone outside of the company and with minimal oversight. But the only reason it’s the status quo today is because someone before us took that risk and it paid off. “This could be an opportunity for creative agencies to use a test and learn approach to platforms that they’ve never activated on before.” - Dana Neujahr “Platforms aren't immune to regulatory challenges, highlighting the need to diversify and capitalize on emerging platforms early on. Exploring alternative avenues ensures that your brand will remain ahead of the curve to maximize reach.” - Norel Mancuso “The most successful brands are open-minded.” - Timipre Maxwell “[Brands should] take that chance and let influencers do what they do best. Brands interfere too much in the creative process and that's a mistake. Because it’s about letting go. It's a lot of risk-taking.” - Sarah Adam “I am all for brands taking creative risks—it's how trends get started! Risks in content creation help bring in new audiences and get them talking about your brand.” - Alejandra Thomas The bottom line: Find something your brand is doing routinely and comfortably—and now turn it on its head. As you develop content, find ways to deliver the unexpected. Whether you’re experimenting with a new content format, distribution channel or creative execution, ask yourself if what you’re creating has stopping power. Luxury fashion accessories brand Alexis Bittar has a feed full of atypical luxury content: rough shots, damaged clothing, hidden merchandise and no sales call-to-action. And yet, videos like the one below are reaching over 200K views on Instagram and over 700K views on TikTok. It pays off to take a risk.

When OpenAI unveiled its GPT Store, it had high hopes. The store would allow anyone to discover and share custom chatbots (called “GPTs”) built with OpenAI’s generative AI tech. But just two months after its launch, TechCrunch raised a flag: the GPT Store was littered with spam. The store “is flooded with bizarre, potentially copyright-infringing GPTs that imply a light touch where it concerns OpenAI’s moderation efforts…[and that] serve as little more than funnels to third-party paid services,” TechCrunch reported. This begged the question—can you trust what’s offered in the GPT Store? More importantly, instead of borrowing someone else’s invention, should you just create your own? Jacob Cass, founder of branding and design consultancy JUST Creative, is a proponent of building your own GPT. “I know that it’s not for everyone and a lot of people are intimidated by it,” says Cass about how some creative professionals perceive AI tools. “But once people are shown how it's done, they're like, ‘Oh, I get it now!’ Something clicks.” To date, Cass has authored various GPTs—for his own use and available to all on ChatGPT-4—to help with everything from creating visual mood boards to blog posts. In his own words, Cass shares more about his experience with GPTs and how to go about creating your own. How did you first get started with GPTs? Jacob Cass: I'm a pretty early adopter of new technology: crypto, Web3 and NFTs. I have a bit of a “shiny object syndrome.” I love exploring new things and experimenting to see how they can influence or impact my career. AI has just blown my mind. Now, it's much more accessible and it's moving at such an incredible pace. It's hard to keep up. At heart, I'm a designer and am classically trained in visual communication. And as someone specializing in branding, marketing and content creation, I wanted to create a bot that specialized in those areas. So, I created a custom GPT and trained it on those subjects and on some of my own materials—ebooks, articles and so forth—so it could understand my point of view. How do you use custom GPTs in your workflow? Jacob Cass: I've created a number of different GPTs (or I prefer the word “bots”) to serve my creative practice: A brand bot: An ideation tool for branding, marketing, design and strategy, like customer personas. A mood board maker: It outputs mood boards or stylescapes and has things like fonts, colors, photography, art direction, color palettes and so forth in an image. In the past, you'd have to scour books, Pinterest, the web, blogs and so forth, and it could take a long time. But [using this bot,] you input some of the characteristics you're looking for and it can generate it on the fly. A minimal logo bot: For simple and versatile logos that send a clear message don’t combine too many things into one. I trained it to just do black and white. A packaging mockup bot: When we're sending things to a client or we're trying to communicate an idea how things integrate together, like fonts, colors and a 3d tangible item, you want to be able to see how it looks and feels, so you can literally type in. You create a 3D, very realistic photo of it in seconds. How do these custom GPTs help you in your creative work? Jacob Cass: Productivity has been supercharged. They’ve sped up my workflow incredibly. You write your inputs and instantly get what you need so you don't have to search for it. Why a custom GPT and not an existing, specialized GPT from the store? Jacob Cass: Well, first off, is [a custom GPT] needed? Is there something else out there that could serve this purpose already? Look in the GPT Store and see if [an existing GPT] works for your particular scenario. I start by using their suggested default prompts. If it doesn't work, then experiment a bit further and decide to move on or not. [GPTs are] built on an amazing large language model. So you're standing on the shoulders of giants, really. They've made it extremely easy to create your own GPT, which is both a blessing and a curse, because there's a lot of trash out there and you don't know what's good or not. As a designer, I felt [public GPTs] were limited and they weren't trained to my style, my aesthetic and what I wanted. So that's why I went and created my own. What is the trade-off between creating on your own from the ground up and using a GPT? Jacob Cass: In general with GPTs, there are some downfalls because you don't have as much control. But for ideation, this is where I see the biggest benefit. You can input your thoughts and you get an output very quickly. Once you know how, it's a matter of putting in the right prompts and the right variables. For anyone creating GPTs (both first-timers or even repeat creators), what guidelines should they follow for the best results? Jacob Cass: Upload training and onboarding material: See if you can create your own GPT with the variables that you want. Upload the data that you want it to use. [For my custom logo bot,] I gave it variables of how it should work and what the output should be: simple, minimal, clean, geometric. This is my style and my aesthetic, and what I think makes a really strong logo.For better outputs, you definitely should train it and say how it should act. I trained it to act in a conversational, inspiring and engaging way to make it a bit more fun. I trained it to ask a question back, for example, if it needs more variables to provide a better output. So this way it gets more information out of the user. Experiment: Try different prompts, and ask it to do different things. You see the results and then you know what’s working or not. Tell the AI to simulate a persona: [Give] a direction of who [the bot] should be acting like—[who] you’re pulling information for and you will get better results. [Tell it to] act, for example, as a marketing expert. Write your task and outline the task steps. If you give it more variables, it will give you a better output. Let's say, create ten taglines and each should be two to six words. Give it context, such as the product’s core selling point. Give it a goal, or describe what the task needs to achieve. Describe the output. What does the output look like? For example, the output should be a bullet point list. Be mindful when instructing the AI to “do” vs. “don’t” do something. I have found that bots don’t listen very well to things like “do not.” It's better if you train it on how to do things versus not doing things. Share your bot with others and get feedback. A lot of people have been using [my] Brand Bot and I've received output of how people are using it. How should we determine where in our workflows to integrate GPTs? Jacob Cass: What you really need to figure out is where ChatGPT or custom GPTs can make your processes more efficient or more effective—and then reverse engineer that. I’ve found so many uses for it. For me, it’s not just for design or strategy. There are so many other aspects; I’m not a developer but I’ve used it to generate code. I’ve used it for SEO, articles and content creation. It's about experimenting to see where it can be used, and then trying it because you learn and then you can improve it. How should professionals decide which AI tools to use? Jacob Cass: It’s about understanding what you're trying to do and finding the right tool to do it. You cannot access or create custom GPTs without the paid version [of ChatGPT] and I’ve definitely noticed a difference in the output from [ChatGPT-] 3.5 to 4. The image creation feature is a paid feature, but you can get around that paid feature by using the same image creation model on Bing. There are other tools out there that give you more flexibility and customization versus ChatGPT or Midjourney. You should also consider where you draw the line in the sand regarding ethics. For example, Adobe Firefly has been modeled on their own stock photography and not scraped from the web, so that could be a better choice for some creatives. But then Adobe has also used its whole library and the people that have contributed their images weren't paid for their contributions, so where do you personally draw this ethical line? How are you communicating with clients about your use of GPTs for their projects? Jacob Cass: When it comes to using AI-generated artwork, I find the output is kind of like the new stock photo so I haven't used it [as final imagery] in any client projects. It's more for the ideation process. It hasn't got to a point where I can get final images for a website that I'd be happy with. [Recently,] I was in a [client] workshop and we had a document that they had worked on in the past, with their mission and vision, and it was all in Italian. So, I uploaded this [into ChatGPT] to translate and summarize, told it to act as a branding professional, and to provide core values and a description of each one. We got some great results, and the client and I were blown away. But before I did any of this, I did ask my client, are you okay if we experiment with AI for this process? What type of industry backlash have you seen about GPTs and AI tools? Jacob Cass: Firstly, there are brands that try to get away with [using AI discreetly], and then there's backlash. BMW did a Christmas ad with reindeer, but one of them had a fifth leg. Plus, I've lost a ton of followers and subscribers because I talk up AI, and there are illustrators, artists and photographers out there that just can't wrap their heads around it. They're in denial about AI, and [worry it’s] going to take their jobs. I think AI is like horses before cars—you have to embrace it and use it because it's not going anywhere. It's the way things are going. What do you see next for AI tools in the creative industry? Jacob Cass: AI video is crazy. What I find fascinating is the storytellers, the creative directors and the producers—and how they put together the angles, the shots and the art direction to tell a better story. They can control the AI better because they know what makes a good story and video. That’s really only possible if you have the knowledge and theory beforehand. It’s AI plus humans. That’s what it comes down to, not just AI. Subscribe to the FWD newsletter for more stories from industry experts in your inbox.

Typography can make or break your web design. Alongside identifying the best fonts for your website, it’s also vital to pick the right font sizes. The size of your font can create contrast and help users focus on your key message. However, one size does not fit all. The websites you design are viewed on all sorts of different browsers and viewport sizes: laptops, tablets, TVs, smartphones — maybe even smartwatches. You therefore need to consider your font size carefully, and here’s what to keep in mind. Font size in web design Fonts can be sized in a number of different ways on the web: Pixel (px) Point (pt) em: The font size is relative to the parent container’s font size. Root em (rem): The font size inherits from the root of the styling. Percentage (%) Viewport width or height (vw or vh) Centimeter (cm) Millimetre (mm) Inch (in) In most cases, you should avoid absolute measurements like cm, mm, in and pt for web designs as they will look different on every device. Pixel is somewhat of an absolute size, as it is based on the pixel size of the user’s screen. However, using px for font sizing is quite a common practice and most web browsers are equipped to make your design look similar across different resolutions even when using px. It’s also a very easy unit to use when considering the collaboration between design teams who would typically design by pixel. Another option is to utilize em and rem. em inherits its size from its parent, while rem inherits from the root styling (hence, why it’s named root em). The default font size in all browsers tends to be approximately 16 pixels. A common practice is to set the root font-size to 62.5%, which translates the default 16px to approximately 10px. We do this to make the mental conversion of the font size easier when using em or rem (e.g. 1 rem = approx. 10 pixels, while 1.8 rem = approx. 18 pixels). This is a handy approach for two reasons: The mental conversion between pixels and rem is easy to calculate in your head. A user can change their preferred default font size and the website would adjust automatically to suit their needs. Now, the next thing to consider is that font-sizes need to be different across different devices. On a desktop monitor there is more room and so fonts can (and should) be larger, while on mobile the screen is smaller so the font size should be decreased so all the text can fit on the page. In CSS, we do this with media queries. For example, we can set a default font size for a h1 element to 3.5 rem. This might look great on desktop, but on mobile it would be way too big. Therefore we could have a media query like: h1 { font-size: 3.5rem; } @media only screen and (max-width: 400px) { h1 { font-size: 2rem; } } This would adjust the font sizes appropriately for a mobile viewport (assuming 400px is the width of the mobile). Even after all this tweaking you may be looking at your screen and thinking: this font looks smaller, or larger, than it should be. This is due to how digital typefaces are designed. Different fonts’ ascenders and descenders generally vary from typeface to typeface, which may make them seem like their proportions are different. (You should , too.) More on making the most of typography. Bite into the history of the squishy sans serifs making scrolling sweeter Typeset a mood with the spookiest type in pop culture, from 'Psycho' to 'Suspiria' Get in on the psychedelic design trend with these groovy typefaces Make online feel offline with one of these handwriting fonts Establish a baseline: Know the difference between typefaces and fonts Optimal font sizes for desktop There are no exact rules for font sizing, but there are some generally good practices to think about when designing for desktop: Body text - Font sizes should be around 16px to 18px for legibility (or 1.6rem to 1.8rem using our sizing rules mentioned above). Keep in mind that more expressive typefaces may be less legible, so if you can afford to go a bit larger, then, even 21px can be pleasant to read. Headings - The headings should be around 1.96 times larger than your body text to create a sufficient contrast. This would mean that if you use 18px for body font size, then you would use around 35px for headings. Expressive or experimental type type generally works best here, since the larger size makes it more legible. Subheadings - These should be slightly smaller than heading size, with some adjustments like less weight to create a contrast between the two. For example, if we used 35px for the heading, we should use around 30px for the subheading. Input fields - These should closely match the body text’s rules. Optimal font sizes for mobile On mobile, you have less room to display your content. Additionally, users typically hold the devices closer to their eyes than they would a laptop or desktop screen - which means your typefaces can (and should) be smaller than on desktop: Body text - Font sizes should be at least 16px for body text. In some cases, you may be able to go smaller (for example. if a typeface has unusually large characters or you are using uppercase letters), with 14px being the smallest you should go. For context, Google’s Material Design uses a minimum suggestion of 14px for their secondary font size, while Apple’s guidelines use 15px for theirs. Headings - Headings should be around 1.3 times larger than your body text to create a sufficient contrast. This would mean if you use 16px for body font size, then you would use ~21px. This is scaled down from the 3.5rem we used on desktop. Subheadings - Here too, these would often be scaled down from the heading size, but we have a slight issue here in which the subheading may look too similar to the body font size. For this reason, some designers choose to make the subheading visually different through the use of weight, formatting like italics and letter spacing. If we used 21px for a heading, we might choose 18px or 16px for a subheading, but with lighter weight than the heading or body text. Input fields - These should closely match the body text’s rules. Responsive font sizes on Wix Studio Wix Studio allows you to create scalable, fluid text adjustments through different breakpoints like desktop, mobile and more. Using the text editor, you can set a minimum and maximum font size for any text element. For example, you could set the maximum font size for a heading to 35 and the minimum to 21 on desktop. This will ensure your text will scale smoothly as you resize the screen. The maximum font size remains relative to the 1920px screen width reference point on Wix Studio, while the minimum font size is relative to the 320px screen width point. You can also set the text to scale between different ranges for different breakpoints and even create custom breakpoints according to your needs, in order to make your website typography fully responsive. Build your website with Responsive AI on Wix Studio.

Clients want to increase their search traffic, and an SEO-driven content strategy is just the thing they need to do it. But how should you frame your SEO proposal? And how much should you charge for your services? The Wix SEO Hub has a few ideas. Listen to experts walk through their SEO experiences (and what you can learn from them) in this podcast The SERPs Up podcast, hosted by Mordy Oberstein, Wix’s Head of SEO Brand and Crystal Carter, Wix’s Head of SEO Communications, is your weekly series of search engine optimization insights. Each episode features a guest SEO expert who shares their real world experience on the episode’s topic, including opportunities, roadblocks and how they overcame certain challenges. Check out these episodes to learn more about marketing your SEO services: Building the processes for marketing agency efficiency Creating effective marketing processes is one of the biggest challenges for any digital marketing agency. Here’s how to get your SEO & content operations right to drive client success. Does AI content rank? It’s no secret that AI is unlocking new opportunities for content marketing, but does AI-driven content top the SERP? Here’s what to tell your clients when considering whether or not to integrate AI into their content strategy. Read about SEO pricing, proposals and brief strategies below The SEO Hub captures a variety of experts’ takes such as Gus Pelogia, Giuseppe Caltabiano and Ray Martinez on SEO basics, advanced SEO, strategies, topic research, on-site optimization, analytics & reporting, Wix SEO Tools and localized SEO. It’s curated for all proficiency levels, whether you’re starting your first project or hitting new milestones in total clients serviced. SEO agency pricing blueprint: Define your pricing and protect your margins As generative AI and new developments disrupt the SEO industry, agencies must be proactive to protect their margins and ensure they stay in business. Price your work in a way that serves both you and your clients. Create SEO proposals that get approved: Pitching big initiatives to clients and stakeholders More complex projects often require buy-in from multiple stakeholders. Mitigate push-back by writing SEO proposals that correctly size the opportunity, consider what the project would look like as an MVP, and pinpoint where you might incur technical debt, among other considerations. Create SEO proposals that win over your dream clients. How to craft the perfect SEO content brief: The elements you need to include SEO content briefs ensure that your client’s content is not only compelling and relevant to their audience, but is also optimized for search. The recipe calls for a number of ingredients including CTA strategies, internal linking and keyword research. Craft an SEO content brief complete with all the elements that'll help you and your clients' content top the SERP.

Web design is transforming at a rapid pace, thanks to the ongoing integration of tech’s newest powerplayer: AI. AI web design tools are now an active part of agency work processes: generating copy, images, code and even full-on websites. So if you want to keep your finger on the pulse, it's vital to gain a baseline understanding of how you can use AI as a web designer. This article explains how to use AI tools to assist your web design process so you can test them out for yourself and weigh their pros and cons of each. You’ll also learn how to create a website using AI tools, like the image generators Midjourney and Dalle-3, and chatbots ChatGPT and Claude. Is AI going to take over web design? Much like all other creative avenues agencies work in, web design is undergoing a major transformation. As agencies reimagine their strategies to play to this changing landscape, they’re asking important questions, like, “Where does this leave humans?” The truth is that AI is a tool, and our tools change all the time. With new tools come new skills however. While computers will certainly take over much of the rote design and development work agencies are still used to doing currently, human creativity and contextual understanding will still be required to build high quality web experiences that delight clients. Can I design a website using AI? Though it’s not the end all be all, AI can definitely put together an initial layout for your website, down to the content and copy. Wix Studio offers a range of functionality to transform how agencies build sites for their clients. Supercharge your productivity with AI-powered tools: speed up workflows, innovate faster, ship code, create images and enhance your website all with the power of artificial intelligence. Using an AI website builder to design a website with AI & what to look for Consider the following factors when considering which AI website builder you’d like to use: Is the builder flexible? Can you further customize options to align with the specific needs and branding requirements of the project? Does the platform work by leveraging robust analytics capabilities? Are you able to see website performance, user engagement, and conversion rates? How well do the AI-generated web designs integrate with other tools and platforms, such as e-commerce solutions and social media platforms? How much customer support, documentation, and community resources are available for troubleshooting when you get stuck? By looking out for these various aspects in the web design process, agencies can determine which AI website builder to leverage for the best outcomes. How is AI used in web design? Suggesting web design ideas Assisting with user research Generating imagery Generating videos Generating real copy Writing code AI tools have swiftly pushed the boundaries of web design, providing designers with a slew of capabilities they can use to streamline agency work processes and elevate the creative process. Here are a few ways to use AI. 01. Suggesting web design ideas. AI can help designers overcome creative block. You’ve no doubt heard about ChatGPT, a sophisticated generative AI chatbot that accepts text as input and generates the output based on it. You can ask ChatGPT something like "Suggest ideas for a promo page that sells shoes," and it will generate a list of ideas to work from. You can also ask follow-up questions to get a more relevant answer to your questions. If you don't like the ideas the tool generated for you, say something like, "Give me five more ideas," and the tool will generate them for you. As founder and strategist Zoe Scaman tweeted, a great use of these kinds of AI tools in strategy work “is to get the obvious, clichéd and overused angles out of the way, fast. That way you can concentrate on unexplored and unique ways into an idea.” 02. Assisting with user research. The better you understand the needs of your target audience, the higher the chance of creating the right design for them. Most web professionals understand the value of user research, but sometimes, strict deadlines and budgeting limitations prevent the team from actually conducting it in a robust way. In fact, 80% of researchers think their company could stand to do more research, according to a 2020 study. AI tools can be used for initial research on the target audience. For example, if you’re building a website that sells shoes, you can input a prompt like, “Generate a customer persona who buys sports sneakers with orthotic insoles,” to learn more about this category of users. But don’t use this data without varying it first, and always fact-check the output information through multiple reliable sources to ensure that it is accurate. The tools can also assist with in-depth analysis of existing analytics data about your customers. Simply export analytics data from tools like Google Analytics or Hotjar as a file, submit it to ChatGPT or Claude, a sophisticated AI chatbot created by the company Anthropic, as a file and ask questions about your users. 03. Generating imagery. It goes without saying that images help to reinforce the idea your client wants to communicate in text. No wonder designers constantly look for the right images when they create websites. Subscriptions to stock photo banks like Stocksy have been popular for a while, but let’s be real, we can all spot those photos of happy coworkers in generic workplaces from a mile away at this point. Now, Midjourney, Dalle-3 and Wix Studio (with an Open AI-powered image generator in the editor itself) can generate tailored visuals web designers can use instead, based on the text prompt you provide. You can choose from a variety of image styles to refine the result. It’s worth noting that while these tools are great at generating abstract backgrounds, they have some downsides when it comes to portraying humans: they might add extra fingers to human hands, extra legs and incorrect properties. So AI-generated images still require a human touch (and review). Generated images can be convenient during the design process, but AI tools can’t beat human artists when it comes to creating truly unique images for a client. If you have the time and budget, you should of course still consider working with seasoned photographers and CG artists. They bring a bespoke approach and their own visual style to a brand identity. Plus, they can elevate your website through the professional association and audience reach. It's important to mention that the US Copyright Law stated that images generated by AI tools like Midjourney are not “works of authorship” because they have no human authors. In other words, images created by AI alone are not protected by copyright because they belong to the public domain. 04. Generating videos. Pikalabs and Runway Gen-2 are two AI tools that can generate videos based on either a text prompt or static image. (Wix Studio AI will have this capability soon.) Video AI web design tools are particularly useful because they quickly add visual interest and a hi-fi feel to your client’s site: use them  to create a video background for a landing page or turn a static photo of your client’s product into a video preview. Similar to Midjourney and Dalle-3, you can fine-tune output results by refining the text prompt, adding essential details or introducing visual effects (such as camera movement or zoom-in). 05. Generating real copy. Instead of using Lorem Ipsum text, web designers can ask OpenAI’s ChatGPT, Claude or Google Bard to generate text by entering a prompt relevant to your client needs, like "write key features of the mid-range sports shoes for recreational trail running." Since the prompts are open-ended, these standalone copy generation tools best serve more in-depth or length copy needs. You can prompt them to generate just about any kind of copy (which you’ll then need to refine to your client brand tone and fact-check). If you have more specific website copy needs, you can avoid toggling between tabs completely by using Wix Studio’s ChatGPT-powered text creator. It’s right in the editor, so you just need to navigate to the text box you want to use and click “create AI text.” Instead of writing an open-ended prompt, you answer a few specific questions, like your client’s business type and name, the topic (like “welcome,” “product description” or “team intro”) and a few must-have details you need included in the text. It’ll produce a few options, and once you select one, you can see the copy in situ right away. Of course, from a design strategy POV, you might still prefer generic Lorem ipsum filler copy, like designer and partner at the digital consulting firm Autogram Karen McGrane. From McGrane’s experience, clients tune Lorem ipsum text out more easily, allowing them to “focus on the conversation about the design.” But it’s really personal preference—having realistic copy can also be super important to the web design process, if you find the copy to be helpful rather than distracting. Real copy can allow you to adequately align content blocks and create a more relevant visual hierarchy of the page. Use Wix's AI text creator to generate website copy. 06. Writing code. AI code generators are super helpful when you’re in need of a fresh approach, when you just can’t figure out what’s gone wrong in the code or when you need a custom element in a pinch. There are a few tools to try here. First, keep your design process super fluid and generate code snippets in-editor with Wix Studio’s AI code generator. Alternatively, platforms like ChatGPT, GitHub’s Copilot and Claude can also generate decent code samples for individual web elements like input forms. The great thing about these tools is that they explain the rationale about the code they provide, making it easier for web professionals to improve their coding skills. But similar to imagery, the code samples generated by AI also require moderation and refinement. The great thing about Claude and ChatGPT is that you can submit the code they generate and ask them to validate it and fix errors. You can use this approach for the code you write and the code the tools generate for you, but it doesn’t work for some reason. How to create a website using AI tools The most straightforward way to do this is using a web design platform like Wix Studio, which is Wix's premium platform for professional designers that offers in-editor AI tools. If you don't need the advanced design and coding capabilities provided within Wix Studio, you can use an all-in-one AI website builder. Otherwise, creating a website using AI tools will require three additional steps before getting into the editor itself: generating a structure for the page using Midjourney; then generating content using ChatGPT, and lastly, combining design and content together into a web layout. 01. Creating a layout for the web page You can use AI to create a layout for your future page in high fidelity. If you’re using Midjourney, you need to type the command "/imagine [what you want to see]" in a chat. You can provide a prompt like "/imagine a beautiful website for shoes" to see AI-generated web design for a shoes website. As you can see, Midjourney was able to generate a few variants of the hero section for us. Some are more usable than others. (You can also start with one of Wix Studio’s professional-grade templates, and then adjust sections to be instantly responsive and fit all screen sizes by using the editor’s responsive AI capability.) There are a few tricks to keep in mind. The better you articulate your intention in a prompt, the better the tool’s chances of generating the right visualization in response. When creating a design for the client website, it's better to explicitly mention keywords like "UX" and "UI" in the prompt so that the tool can understand that you want to see a web layout. /imagine modern website for shoes, ui, ux, ui/ux” You can also add visual references with the text prompt. For instance, say you find a web design that you like Pinterest, Dribbble or Behance. You can add it as an input signal to Midjourney along with your text prompt. The tool will match text prompts to the image you've added and will be more likely to generate a relevant image. But, there’s a caveat: sometimes generative AI tools create a very close copy of the image you provide as a reference, so it's important to moderate the output the system provides in order to avoid copying other designer’s work—and its potential legal implications. There are a few keywords you can add to your prompt to receive a higher-quality visual design that’s close to your specific needs. For example, you can add the keywords "HQ" and "4K" to your prompt, and the tool will understand that you want to see high-quality visualization of web layout: /imagine beautiful website for shoes, ui, ux, ui/ux, HQ, 4K” Midjourney has a few critical downsides. The tool often adds visual noise to the images, like additional, unnecessary graphic details (like those extra fingers referenced earlier, or extra decorative details on the background). So, before using this output in web design, you’ll likely need to polish it a bit in a photo editor. 02. Writing content for the website It goes without saying that well-crafted copy directly impacts how visitors perceive your site design. As mentioned in the AI copy generation section above, web designers often use placeholder text instead of the actual copy when working on a layout, but Wix’s ChatGPT-powered AI text creator (and other AI tools like it) offer a new alternative by producing AI-generated website content instead. ChatGPT can be used for a lot of tasks you’d rather not do yourself, like writing marketing copy, product descriptions and even the copy for an entire web page. (Though you’re going to want to give that copy a once over and make it your own.) I’ve used ChatGPT to generate content for an entire landing page, including error and success messages for visitors’ actions. Even though I had to validate the copy and sometimes rework it, using an AI tool was a net positive because it improved my overall project efficiency and sped up my design process. Again, the better you articulate your intention in the prompt, the more relevant the response will be to your AI web design. You need to specify enough detail so the tool understands exactly what you want to see. For instance, you could enter a prompt like, "Provide content for the landing page that promotes sports shoes. Content for hero and product features section." As you see, the sections we mentioned in our prompt match the sections we have in the design generated by Midjourney. ChatGPT tends to generate long text, so you’ll likely need to adjust its output before adding it to your actual design. But remember that you have control over the AI. If you want to see text up to 100 words, simply write a prompt like “Write for the hero section in under 100 words and content for the product features section in under 80 words” to give ChatGPT clear instructions for the content length. You can also ask follow-up questions to receive more relevant responses. Suppose the tool generates text for the call to action button, and you don't like it. You can create a follow-up prompt to get the tool to generate copy alternatives that are closer to what you had in mind, like, "generate a few more examples of text for a call to action button." You can also generate text for individual sections and text boxes, using Wix Studio’s in-editor text creator. 03. Turning your design into a fully functioning website Once you have the page layout and content, you can use them as references to create the fully functioning version of your website. Refer to your AI-produced layout like you would a drafted layout in Figma, and build your site out accordingly. Then paste the AI-generated copy (which you edited and fact-checked) where applicable. And once you’ve defined the structure of your page, you can then copy and paste visual elements, like images of shoes generated by Midjourney, and fill out content blocks with the text generated by ChatGPT. The role of AI tools in web design process A lot of people in the design world are concerned about AI tools, and whether or not AI will replace graphic designers. There is some reason to be. AI tools are causing the line between creating and copying to blur. Ever since 2023, the first full year of many of these AI tools’ existence, creatives have also been filing class-action lawsuits against them, alleging they used artist images scraped from the internet to train their tools without their consent. Some influencers are positioning the tech as a way to get rich quick, selling its potential quantity of output in lieu of dependable quality. The tech has led to misinformation and online content farms. And in some instances, clients are in fact opting for AI tools rather than hiring creatives, as recently happened to UK-based Studio AAA. So, is AI generated web design the future of the web? Not without the designers who build it.  Used responsibly, the primary objective of AI web design tools is not to replace people with robots, but to improve the efficiency of the person who uses them. In theory, artificial intelligence tools could free up web designers from routine operations, like writing realistic copy, to give them more time to experiment with design and find unconventional solutions. Some studios, like Ogilvy Paris, use the tools to jump start creative campaigns. Web designers who use AI tools will likely have a significant competitive advantage over other designers, because they will be able to go from ideation to final design much faster. Ultimately, AI web design is about co-creation—not co-opting.

Low-code no-code development platforms forever changed the way people and businesses create online tools. While software development was once the exclusive domain of programmers and developers, now anyone – including designers, content creators, and business owners – can build websites and apps of their own. (See: Strategies to scale your agency faster with no-code/low-code solutions). With Statista forecasting the global low-code no-code market revenue to reach 65 billion dollars in 2027 (as compared to its 13 billion dollars valuation in 2020), and Gartner predicting that 70% of new applications developed by enterprises will use low-code no-code technologies by 2025, it’s evident that low-code no-code isn’t just the domain of DIYers, but web design professionals and agencies, too. And low-code no-code tools are already ubiquitous; it’s up to agencies to determine which tool works best for them and how to integrate it into their processes. In this article, we’re going to take a closer look at no-code low-code development, its benefits, as well as the reasons for its rapid emergence in the digital creation space. We’re also providing a list of the top 10 low-code and no-code tools so that you can try this trend yourself. What is low-code no-code application development? Low-code and no-code platforms like Wix Studio enable programmers and non-programmers alike to create websites, apps, and other software without writing code. What is no-code web development? In the no-code space, people can create fully functional platforms without any programming knowledge at all. Before low code no code capabilities were around, creating and designing a website seemed like a long shot for a lot of people (unless creative coding is your thing). Now, however, these tools have democratized a space that was once dominated by developers. Whether people specialize in tech, real estate, wellness or somewhere in between, they can now create their own websites without relying on a programmer. Likewise, web designers can focus on the visual element of website building, without needing to learn coding first. What is low-code web development? The low-code space is similar, enabling the creation of more advanced applications with minimal coding, think: AI code generation and visual programming. Tools like Wix Studio make use of drag-and-drop building blocks and templates to create websites and apps. The code is still there–it’s just prearranged into bite-sized visual elements that creators can use to start designing right away. While developers will always have a role in creating the code that underlies every feature, anyone can piece together these features themselves. This means you still get the functionality of HTML5, JavaScript and CSS, but the building process is simpler and more efficient. What are the benefits of working with a low–code no-code platform? There's lots of hype around the low-code, no-code movement, and for good reason. There are several benefits of working with such a platform: 1. Simplifies prototyping Before going live with a new product, you can use a low-code or no-code platform to efficiently create a prototype. While it’s wise to do engineering or programming prior to the launch stage, drag-and-drop tools can be used to build the initial model without the involvement of a developer. This will communicate your idea to potential inventors, early adopters, team members and other stakeholders before you invest time and resources in programming. 2. Speeds up digital transformation One of the main reasons for the movement’s growing popularity is that it speeds up the time it takes to produce new applications. Using a low-code platform, you can build software that readily adapts to increases in traffic or scalability. For enterprise-level agencies, a project that otherwise may have taken one year is now reduced to a few months. Because the process of building and producing software is faster and less complex, low-code development platforms can help companies innovate more quickly and keep up with changes in the market. Using these platforms, businesses can stay competitive by efficiently adapting to meet the market’s needs. 3. Enables a smarter use of resources Low-code and no-code development platforms help businesses allocate their resources in a smarter way. Because these platforms make use of existing templates, pre-built forms and other elements, even low-code platforms don’t require a programming background to build functional applications. If custom coding is needed to further develop the application, IT departments can dedicate their time and focus exclusively to those more advanced elements. This helps them prioritize more critical projects, rather than writing each line of code manually. 4. Improves workplace efficiency Relatedly, the low-code movement means that team members without programming knowledge–such as designers, content creators, and project managers–can have a hand in software, website, and app development directly. When it comes to website development, for instance, content and design teams can work together to independently create landing pages and other site elements, without needing to pull a developer from important product work. Another advantage of this is that it reduces the number of cooks in the website building kitchen. Writers–rather than simply writing the content on a separate document and then relying on other teams to upload it–can add the content directly to the CMS. Likewise, designers can create and manipulate visual elements without needing to work hand-in-hand with a developer. 5. Inspires creative autonomy Whether you’re working independently or on a team, low-code and no-code platforms support the goals of creatives. Because these platforms are readily adaptable, marketing, design and content professionals can experiment with the layout of landing pages, forms, and other key assets. This means they can adjust these elements based on their own research, data, and user feedback, and act on their findings right away. 6. Supports independent business owners and hobbyists For those creating a website, app or software to support their own hobby or small business, low-code and no-code platforms help them turn their creative visions into reality. Artists and designers, for instance, can build a custom website to showcase their portfolio–displaying their work online while also highlighting their style and skills through their site design. Likewise, small business owners can create websites, apps and even software of their own to promote and sell their products online. Best low-code no-code tools and platforms For those curious about using no-code and low-code platforms for your own projects, here are some of the best: 01. Wix Studio 02. Oracle APEX 03. Quickbase 04. Zoho Creator 05. Kissflow 06. Voiceflow 07. Bubble 08. Airtable 09. Zapier 10. Mendix 1. Wix Studio Wix Studio is a low-code website creation platform for advanced, professional designers. The tool allows you to conceptualize and design responsive websites using smooth drag and drop tools. Wix Studio is equipped with advanced design features, including flex and grid layouts, full breakpoint control and custom interactions. 2. Oracle APEX Oracle APEX is a low-code tool for building enterprise apps. Because it doesn’t require scratch-made code, it allows companies to quickly develop and deploy apps. The apps are scalable and secure, with features such as data filtering and charting and a responsive user interface. 3. Quickbase Quickbase is an application development platform with both low-code and no-code functionalities. It offers tightly integrated dashboards, reporting, and insights in order to streamline project workflows. The tool enables citizen developers to continuously improve business applications while maintaining enterprise-level security and compliance standards. 4. Zoho Creator Zoho Creator is a low-code application development platform that lets you use drag-and-drop elements to create iOS and Android apps. It offers over 550 pre-built integrations so that you can connect all your business’s tools–including your CRM, email platform, and project management tools–and run them from a single app. 5. Kissflow Kissflow is a low-code digital workforce software with a drag-and-drop interface. It includes mobile access, drag-and-drop coding as well as hand coding, and data synchronization. The platform has multiple use cases for businesses, including project management, issue tracking, and process automation. 6. Voiceflow Voiceflow is a no-code collaborative tool for designing, prototyping, and building virtual conversational assistants. It enables companies to rapidly integrate and deploy custom chatbots, interactive voice response assistants, and in-car assistants. The tool doesn’t require any knowledge of coding, instead using drag-and-drop tools that let people create and reuse components. 7. Bubble Bubble is a no-code platform for building web apps. The tool is usable on both computer and mobile browsers and offers advanced capabilities such as creating chats, news feeds, and other real-time interactivity. It allows multiple team members to collaborate in the creation process simultaneously and share feedback within the platform. 8. Airtable Airtable is a no-code platform that brings spreadsheets and databases together. The tool is highly versatile, helping businesses manage workflows by creating calendars, assigning projects, and syncing data. The platform offers pre-made templates that can be customized for different projects. 9. Zapier Zapier is a no-code workflow automation tool that integrates between more than 3000 web apps without requiring the help of a developer. The tool passes information between these apps to create efficient workflows and automatically completes routine business actions, such as copying attachments or sending updates through Slack. 10. Mendix Mendix is a low-code RAD tool that allows enterprises to create apps with little coding. As a cloud-native platform, it allows citizen developers without specialized expertise to build portable, scalable, easily deployable applications. It also makes use of built-in automation and machine learning.

Artificial intelligence might be the most buzzed about topic of the moment, but Wix and AI have had a long-term relationship. We launched our first AI website generator, Artificial Design Intelligence (ADI), back in 2016. It was a game-changer for building basic websites, but it was never intended to replace web designers and agencies. We know the sites you create are bespoke, but there’s a good chance you want to create those bespoke and tailored sites faster and more efficiently. That’s where Wix Studio’s AI tools come in. (You can read about our other features in this guide to Wix Studio.) “AI completely disrupts the way creators work, not just in terms of efficiency but in terms of helping them shine and do a better job creating websites,” says Naama Ben-Oliel Ronen, the product team lead who spearheaded Wix Studio’s Responsive AI. “At Wix Studio, we’re giving you the AI tools to scale up your work so you create both better and faster.” (By the way, we also spoke to Ogilvy Paris’ David Raichman and Mathieu Plassard about leading an agency in the age of AI.) The Wix Studio AI tools changing the game Responsive AI Let’s start with Responsive AI, a feature that’s totally unique to Wix Studio. Wix Studio’s Responsive AI applies optimized layout tools and responsive behaviors to either one site section at a time, affecting all screen widths, or to the mobile breakpoint while maintaining the desktop design. To build it, we labeled thousands of Wix sites to teach the tool how to detect related groups of elements in a site section. From there, the AI optimizes the section based on the hierarchy of those elements and responsive design best practices. “We have an advantage at Wix since we have so many different sites we can analyze,” she says. “This feature is truly a game-changer. A single click does so much behind the scenes and disrupts the web creation process.” AI Code Assistant Developers will also want to try the AI Code Assistant. It offers code suggestions in real time, helping you build more complex and custom sites faster. It also explains its suggestions along the way so you know what’s up. “The AI was trained on Velo examples, documentation and best practices to create idiomatic Javascript code for the Wix platform,” says Yoav Abrahami, Head of Wix Code Products. It’s built right into the Wix IDE and you can click the Wix AI Assistant icon in the sidebar to access it. (Read more from the Studio team: exactly how the Wix Partners product & UX teams designed the new workspace) More AI capabilities you should know Wix has rolled out tons of AI tools to help site builders and business owners use AI in their web designs at all experience levels and disciplines. You can read more about our CEO’s commitment to AI, but here’s a quick look at some additional features: AI Meta Tag Creator: Wix’s first AI-powered SEO tool generates title tags and meta-descriptions tailored to every page. From there, you’ll be able to choose from several suggestions, then refine with prompts and tailor the tone of voice to suit your needs. AI Image Creator: Describe the image you’d like to feature—a woman doing yoga, a restaurant full of happy customers—and the tool will generate a photo you can instantly add to the site. AI Text Creator: Just provide the topic, plus anything that’s important to mention about it, and the AI will write your copy for you. AI eCommerce Descriptions: Explain the business type and quickly describe the item to generate as much product copy as you need. AI CMS Assistant: With just a few details, generate a new collection for your CMS, including suggested fields and sample content. If you’re as committed to AI as we are, you’ll be happy to know that this is just the beginning. We’re rolling out more AI tools all year long, so check out the product roadmap if you don’t see your dream feature yet. (Learn more about Wix's new premium plans.) It’ll be worth the wait. “AI already enhances efficiency, and as it improves, it will also serve as a catalyst for inspiration through generative AI and other technologies,” Ben-Oliel Ronen says, “like a collaborative assistant that frees you up to focus on the creative and strategic work that scales your business. Going forward, AI will evolve to be proactive and suggest actions rather than reacting to requests.”

With the surge of online brands and services, now might be a better time than ever to start a web design business. But if you’re on the fence about whether to make this your full-time gig, then you’ll want to take the time to understand what you’re getting yourself into. After all, it’s not just about having the technical know-how; it’s about understanding the market, the challenges and the true value you can offer to your clients. For web designer Derek Hairston, his ‘aha’ moment came with the realization that “most web design agencies leave clients in the dark with unexpected costs, delays, and no visibility into the process.” “We bring our clients’ vision to life and give them peace of mind at every step of the way,” he says about his full-service agency, Olam Sites. “We specialize in building custom websites and features on Wix Studio.” Learn more about how to manage your agency on Wix Studio. Below, we cover the essential steps of starting your web design business. Keep reading for tips on running an agency and finding your own conviction to get started. How to start a web design business Every business is a little bit different, but in general, you’ll need to take these steps: Choose your niche Decide which web design services to offer Register and license your web design business Create a business plan and set goals Price your services Build your portfolio or website Promote and market your web design business 01. Choose your niche To stand out in a crowded market, you’ll want to know your “who” and “why.” In other words, it’s a good idea to narrow down your focus and decide on the types of clients you’d like to take on. “Deciding on your niche is a blend of self-discovery and essentially asking the question, ‘Who would I be excited to wake up and serve every day?’” notes Brad Hussey, web designer and founder of the Creative Crew community. “You’ll be spending considerable time, energy and money being around these people at trade shows, on podcasts, writing content for, networking with—and ultimately producing solutions for.” Remember that just because you decide on a particular niche now doesn’t mean you can’t broaden your reach and services later on. It’s much easier to start small than to start too broad, or to bite off more than you can chew. If you’re struggling to decide on your niche, start by defining why you do what you do. For example, are you passionate about the restaurant industry and see an opportunity to build more professional online experiences for them? If so, start there. In the video below, Hussey gives additional tips for solidifying your niche and the “why” behind what you’re doing. 02. Decide which web design services to offer Once you’ve settled on your “who” and “why,” the “what” should come somewhat naturally. Decide what services you can (and want) to offer your clients. Your services could include: Website design and development Ecommerce solutions User experience (UX) design User interface (UI) design Search engine optimization (SEO) Mobile app design and development Website accessibility Graphic design Custom web application development Online branding Think about which services can be offered on a regular basis—such as graphic design or SEO—and thereby supplement larger one-off projects by bringing in recurring revenue. Also, consider ways in which you can package your services together to better service your clients. 03. Register and license your business Before diving into creative work, it's important to address the legalities of starting your own business. You’ll need to register your business with the relevant authorities. In most U.S. states, this will be your Secretary of State. To register your business, you’ll need to choose a business name and decide on your legal business structure. Consider, how big do you plan on growing your team? Do you plan on managing the business alone or with a partner(s)? Ultimately, what is the vision for your business and how it will evolve? The answers to these questions will help you choose between several structures, the most popular of which include: Sole proprietorship: Owned and operated by a single individual. As the owner you have unlimited personal liability and business income is reported on your personal tax return. Limited liability company (LLC): Combines elements of partnerships and corporations, offering limited liability for owners (members) and flexibility in management. Income is typically passed through to individual tax returns. Partnership: A business owned by two or more individuals who share profits and liabilities. There are general partnerships (equal sharing) and limited partnerships (with limited liability for some partners). Corporation: A legal entity separate from its owners, providing limited liability protection. Shareholders own the corporation and it can be taxed as a C corporation (double taxation) or an S corporation (pass-through taxation). As shown above, each structure has its own tax obligations, protections and requirements. You’ll therefore want to make sure to thoroughly research your options and consult a business attorney, consultant or accountant before making a final decision. At this stage, consider whether you’ll need to apply for an Employer Identification Number (EIN) from the IRS and open any business accounts with your bank to keep your finances in order. Make sure to obtain all necessary licenses, insurance and permits for running a web design business in your region, too. 04. Create a business plan and set goals There are many other decisions you’ll have to make from both an operational and strategic side. A good place to start is by tackling your business plan. Your business plan will serve as your roadmap, outlining things like: Your business description Target market Competition Organization and management Services and products Goals and strategies Financial projections Do your due diligence and don’t rush this step. As you build out your business plan, you may realize things you hadn’t before—like the need to secure outside funding. “I started off as a penny-pinching bootstrapper, although I’m not convinced that’s the best way,” reflects Hairston on the early days of Olam Sites. “I projected revenue based on the potential customers in my immediate environment, but this limiting mindset put a ceiling on our earnings and scalability.” “My suggestion when getting started,” he adds, “is that your projections and confidence should justify raising funds for greater scalability. Otherwise, what’s the point?” Whether you need extra resources to expand your services, grow your team or invest in marketing—a business plan can help you decide when and how to raise money. It can also show where the money will go when approaching investors, banks or other potential backers. 05. Price your services As your financial and personal goals for your business start to take shape, so too will your perspective on how to price your services. Oftentimes deciding on what price to charge can feel like taking a shot in the dark. Or, you may feel pressure to price your services low if you’re just starting out. However, you’ll want to avoid selling yourself too short. At the same time, know what your competitors are charging. Identify your differentiators while weighing your expenses and ideal profit margin. Think about the different clients you plan to take on as well as the different web design pricing models you can offer: Flat fee (a.k.a. “Project-based pricing”): A fixed amount that you and your client agreed on at the start of the project. Hourly fee: An hourly cost, ensuring that you get paid the agreed-upon amount for every hour you spend on a project. Monthly fee (a.k.a. “monthly retainer”): A contract, either measured in time or value, that involves monthly payments for a certain amount or type of work. Learn more: Choosing the right business model 06. Build your portfolio or website A strong portfolio is key to attracting clients and showcasing your design skills. This is your chance to show (not just tell) future clients what you’re capable of creating online. When creating a website for your web design business, consider using a platform that can host both your website and your work for clients. This not only helps to keep everything in one place but also helps you to get ultra-familiar with the web tool you’re offering your clients. The most effective creative portfolios include sections, pages or CTAs like: About: Introduce yourself and your team, including your credentials like any relevant education, industry awards and your value proposition. “Our Work”: Showcase projects that represent your best work, and make sure there is a brief but clear backstory so that visitors understand how you solved your clients’ needs. Keep in mind that before uploading client projects, you should always get client approval in case projects are confidential or not yet live. Services: List the different services you offer so that you’ll spend less time weeding through requests and more time connecting with relevant prospects whose needs match your skills. Contact: Make it easy for people to contact you with any questions, and consider embedding a form into your site to collect useful information from prospects (such as their company name, current website’s URL, etc.). “Book a Meeting”: Offer high-intent prospects the opportunity to meet you face-to-face via an online booking feature. A solution like Wix Studio, for example, is tailored for agency work. It brings together features—including AI tools—for web design, development, SEO,  eCommerce, website maintenance, CMS and more. Beyond having the tools to design cool, interactive sites for your clients at scale, you can enjoy built-in capabilities that allow you to expand your services. Build your agency site on Wix Studio with one of these responsive templates. 07. Promote and market your web design business Once you’ve published your site and opened yourself up for business, take steps to establish your brand and to proactively get in front of potential clients. “Building authority in your industry by creating content is like investing money in the stock market,” says Hussey. “When I started creating videos, writing blogs, appearing on others’ podcasts—those efforts may not have produced results in the immediate term, but over time, the benefits have paid me back in multiples.” Exercise your existing network and ask for referrals. Engage with folks on social media. Scour job boards, including LinkedIn, for any calls for help. Here Hussey suggests four additional ideas for your outreach: Don’t forget to invest in your personal brand. Given how nearly 70% of consumers trust influencers, friends and family over information coming directly from a brand, it’s always a good idea to use your own sphere of influence to connect people with your agency. Note that Wix Studio includes marketing integrations that allow you to schedule social posts, send emails and track performance—both for your clients and yourself. Use these tools to your advantage as you spread the word about your business. Web design businesses and agencies built on Wix Studio to inspire your own One way to jumpstart your business’s website creation is to follow the examples of established, successful agencies, like the sites below. In addition to providing fundamental information, each of these sites packs a creative punch and demonstrates the creative potential to future clients. The Boathouse Agency This creative design agency shows that there is no limit to the growth potential of your web design business. The Boathouse Agency goes beyond web design and offers complete 360 creative and branding solutions for brands of all sizes. Visual Identity Visual Identity is a web design studio specializing in site design, UI/UX, development and branding. Their site’s black-and-white design, typography and visual elements create a bold and impactful statement about their vision and purpose. Scopetheory Scopetheory leads with results-driven design for their clients that involves taking branding to another level. The homepage makes it easy for prospects to see the agency’s results, with prominent callouts that highlight their clients’ accomplishments. What is a web design business? A web design business is a type of design agency that specializes in creating and maintaining websites for clients. However, more often than not, it’s about more than just design; it’s about building functional, user-friendly online spaces that serve a specific purpose for a client. The scope of work involved in a web design business can be broad. They can range from simple static pages to complex web applications and everything in between. Whether it's an eCommerce platform, a personal blog or a corporate website, each project comes with its own set of design and development challenges and requirements. Why start a web design business? The web design industry offers a world of business opportunities for creative and tech-savvy entrepreneurs. Starting your own web design business not only taps into a field that blends art and technology but also positions you in a market with high demand for your services. The benefits of starting a web design business are numerous. Here are some of the most compelling reasons to consider: High demand: In a digital age, nearly every business needs a website, increasing the demand for skilled web designers. Flexibility: Running your own business means you can set your own hours and work from anywhere, be it your home office or a beach in Bali. Creative freedom: As the owner of a design business, you have the freedom to express your creativity and make decisions that align with your vision—from the clients you choose to take on, to the design and website niche you specialize in. Considerations when starting a web design business Starting your own web design business is a big step professionally and it's often accompanied by a set of important considerations that any new business owner should be aware of. Is web design a profitable business? The profitability of a web design business can be significant if managed correctly. Here's what you should keep in mind: Demand for services: With more businesses going online, the need for professional web design services is on the rise. Tapping into that demand can mean a lot of work for a web design firm. You’ll need to think about things, such as your sales process for your web design business, amongst other key business needs. Pricing strategy: Setting competitive rates that reflect the quality of your work and the value you provide is the key to profitability. To do this, you’ll need to have an idea of what your competitors offer and how they package similar services. Be mindful of value-pricing, which is setting your rates according to the value of your work, not just the time spent on it. Marketing: You’ll need to promote your business to give yourself the best chance of securing long-term and profitable clients and projects. This could include networking or connecting with related online and offline communities to promote yourself and your business. Encourage your current clients to refer you to others who might need the same services and build your freelance community along the way. Diversify your services: Offer a range of services within the field, including content management and social media promotion, if relevant to your expertise. Build client relationships: Establishing long-term relationships with clients is crucial to getting repeat business and securing more freelance design clients. Stay updated with industry trends and changes: The web design industry is constantly evolving. Keep learning new skills and staying abreast of trends to remain competitive. Can I start a web design business with no experience? With no prior experience, starting any type of business can be challenging. However, focusing on education and growth from the outset can help you maintain momentum and see measurable development over time. These steps can be a solid guide for your first few months: Learn the fundamentals: To understand web design from the ground up, get familiar with user experience, content writing and responsive web design. While these days it’s not necessary to create websites with code, an online coding class in HTML, CSS or JavaScript will help you understand the backbone of your websites. Practice your skills: As you learn new concepts, put them to use. One option is to recreate websites you find online, down to the details of hover interactions and entrance animations. Practicing on Wix Studio can help you focus on your web design skills, since the platform has extensive no-code design capabilities. Share your progress: Whether you’ve created wireframes, designs or live websites, share your real-time process and finished products on your social channels. You’ll receive encouragement and feedback from professionals, plus you’ll enjoy going back to your old posts to see how far you’ve come. Connect with professional heroes and mentors: “Become an apprentice of someone who is already successful in the industry to gain the skills, experience and industry insight,” advises Hairston of Olam Sites. “This could be in a variety of forms: employee, mentee or YouTube channel subscription.” Choosing a professional hero—someone whose style you admire and want to emulate—will give you a wealth of creative inspiration. Plus, it’s never a bad idea to get in touch with them; they might be happy to provide mentorship and feedback as you find your feet. Build your online presence: Now that you’ve completed a few projects, organize everything on a portfolio website. You’ll have one link that you can easily share to show off your past work, whether you’re looking to take on clients or build up your network. Can I start a web design business from home? Starting your web design business from home brings great advantages like no commute time, significant cost savings and complete control over your work environment. And though this also comes with its challenges, you can overcome them with these best practices: Enlist time management for work-life balance: Different from project management, time management helps you organize your day across your different tasks, including any personal tasks that you may have to take care of while at home. Set a clear start and end for your work hours, as well as offline times for lunch and screen breaks. Create a Zoom-friendly space: Video conferencing isn’t unique to working from home, but take notice of what’s behind you when you’re on camera for video calls. Make a good impression by clearing away laundry and dirty dishes, and find a space away from household interference. Connect with online communities and local organizations: Without an outside office space, it can be more difficult to cross paths with like-minded professionals for shared learning and networking. But with a little effort, there’s a big payoff. Join online professional communities like Freelance Fam for web design freelancers, and Creative Crew for web design agencies. Find nearby events to attend via resources like Meetup. Schedule in-person meetings: While it’s comfortable and convenient at home, health experts encourage getting out of the house daily for physical and mental well-being. Do this by finding time to meet with colleagues or clients face-to-face, whether for business meetings or casual coffee chats. Learn more: Guide to Remote Work Tips for managing your web design business Effectively managing your web design business helps keep projects flowing—on time, on budget and on brief—and ensures a positive experience, both for your team as well as for your clients. First create a solid project management process and then choose a project management software that meets your needs and budget. Best practices for project management Keeping projects on track ensures client satisfaction and repeat business. Clear communication: Establish open lines of communication with clients to manage expectations and keep them updated on progress. Project management tools: Utilize software like Monday or Asana to organize tasks, owners, dependencies, deadlines and collaborations. Hairston provides some insight into Olam Sites’s efficient management practices: “Our operations strategy is centered around standard operating procedures, leveraging efficient tools (Asana, Hubspot, Wix Studio, etc.), and a phenomenal project manager. Wix Studio centralizes all client websites and team access, making the deliverable handoff process seamless and scalable.” With Wix Studio’s management tools, you can work from a unified workplace no matter how many employees are working together. And for teams on the go, the mobile app keeps everyone involved and up to date. Other features include a collaboration suite, handover resources and reusable assets. Business software solutions Leveraging the right business tools can greatly enhance your efficiency as a business owner. Invoicing and accounting: Software like FreshBooks or the Wix invoice maker can simplify financial management by helping you create invoices. Time tracking: Tools such as Harvest or Toggl help you keep track of billable hours for each project.

As a web designer, the last thing you want after spending untold hours building out a site that looks great on your screen is for it to look glitchy on someone else’s. (And with the number of devices there are in the market lately, your site is pretty much guaranteed to show up on some unexpected screen sizes.) In this day and age, a responsive web design approach that ensures that websites behave well on a variety of screen sizes and resolutions is pretty much table stakes. With that in mind, we’re sharing a curated collection of responsive websites from a variety of sectors. Each responsive website example on our list uses a particular creative strategy, like flexible grids, multiple columns and zigzag layouts, to make sure their design can be viewed quickly on any device. But before we dive into the examples, let’s answer a few popular questions about responsive design. What is a responsive website page? A responsive website page is a page that adjusts its layout and content based on the size of a viewport. A responsive web page looks equally good on a small screen of a mobile device and on a large TV screen. 20 responsive website examples 01. Maya Lynne Adar 02. Ethical Essence 03. The Boathouse Agency 04. Kristina Horan Website Designs 05. La Bonne 06. VMV Studio 07. Velocity X 08. Moon Rabbit Acupuncture 09. Visual Identity Co. 10. Scopetheory 11. Esperia Advocacy 12. Product Hiring House 13. KlikArch 14. Strategy Folk 15. Change the Game Studio 16. Praagya 17. Aura Studios 18. The Forestta 19. The Benev 20. YNK 01. Maya Lynne Adar Maya Lynne Adar is a multidisciplinary designer whose website uses unconventional typography that combines an italicized serif with a sans-serif font. The site additionally features cutout shapes that pop in and out of the screen and a dice-like mechanism (built with custom CSS) that allows visitors to toggle between various color palettes. Animations, hover effects and horizontal scroll further add an element of playfulness and surprise. Maya Lynne Adar accounts for the fact that less is more on smaller screens, striving for elegance in simplicity. The minimalist layout presents the artist's work across several menus—a testament to the importance of having a strong information hierarchy when it comes to creating an intuitive UI. The mobile view, however, does away with the horizontal scrolling altogether in favor of a card-like format that presents the different tabs in Adar’s menu. The layout therefore offers a much lighter experience, not only because of the limitations of mobile interactions but because less heavy sites load quicker. 02. Ethical Essence Ethical Essence’s eCommerce website stands out for its strong branded touches: earthy tones, high-definition videos, sans-serif typeface and well-lit product photography. The company emphasizes these nature-themed visuals, showcasing eco-friendly skincare products against a backdrop of sudsy beach waves and rocky terrain. As a whole, the site is gorgeously responsive, with all the elements adjusting well with the breakpoints. That’s all to say, you won’t notice much of a difference on any screen size because the website is formatted to shrink and expand accordingly. One way Ethical Essence achieves this is by changing their product gallery to display just one product at a time on mobile (rather than the row of four products on computer screen sizes), intentionally keeping the product image front and center while displaying related products on a slider. The takeaway: give assets room to breathe, even if they can’t share the width of the mobile page. 03. The Boathouse Agency The Boathouse Agency's website exudes coolness and creativity, with meticulous attention to detail. The website glides gracefully when scrolling. The combination of videos, animations and unique scroll behaviors creates a non-traditional experience—a perfect complement to a portfolio that showcases innovative design projects and celeb collaborations. Notice how the logo plays well on all sections because it changes based on what’s behind it, keeping the agency’s  branding neutral and letting their work do the talking. The mobile version of the site offers a more simplified experience. You’re likely not used to being greeted with a video on a handheld device, which immediately sets the brand apart. After that, you’re presented with a scrollable listview of different case studies. It’s all kept neat, tidy and professional on mobile view, with a look and feel that spotlights some of the incredible clients in The Boathouse Agency’s portfolio. 04. Kristina Horan Website Designs Kristina Horan Website Designs (KHWD) site is bold from the jump, with sharp contrasting colors that add some pop to the daring grayscale image at the top of the site. The website has an eclectic look and feel as you scroll, using various scroll behaviors, buttons and blurred images that add flair.. The website is arguably even more impactful on mobile, with the same scroll behaviors presented in a tighter area so that there’s something eye-catching at every portion of the scroll. In the header, KHWD tucks the menu behind a hamburger menu (likely to reduce cognitive load), which draws further attention to the striking image on the landing page. It’s all carefully crafted, so take note of how well the header image scales, the flow of information presented and the scroll-friendliness of the website. 05. La Bonne La Bonne is an organizer of corporate events, experiential marketing campaigns and social gatherings with a website that matches the team’s “good vibes” approach. Upon entering the site, you’re greeted by a collage on each end of the screen. The collage fades on scroll to reveal additional design elements that explain what the company is all about. The site is optimized for mobile screens, with reasonably sized, centered text.  The website features contrasting colors and a simple flow of information from top to bottom. The button to submit your contact information is illustrated as an envelope, adding an endearing touch that sets the tone for the relationship from the very beginning. 06. VMV Studio VMV Studio is a self-described collective of designers, filmmakers and visionaries whose website reflects the studio's innovative approach to visual storytelling. Animations, bold graphis and videos breathe life into the web design, showcasing the studio's creativity and technical prowess. Meanwhile, subtle touches—like the frosted glass footer and text fill on scroll—add extra flair. The same holds true on phones; all the same assets make a comeback without slowing down the website’s load time. You’ll see the same scroll effects, the same high-quality videos and all of the same pages on mobile. It speaks to the fact that you don’t have to dumb down the mobile view of your website when you use Wix Studio. On mobile view, the item grid that features the VMV Studio’s portfolio of work shifts from a looser collection of one to two items per row, to a strict single item per row format that makes the website more scroll-friendly. 07. Velocity X Velocity X leverages mouse hover effects that move the objects in the background, combined with unexpected horizontal scrolling. Blurry shapes, glowing outlines and glass-morphic menus compliment their cutting-edge branding. The recurring use of purple, orange and turquoise hues offers visual cohesion through a branded color palette, and an FAQ menu at the bottom adds further context to the brand’s offering. Velocity X maintains its look and feel on the mobile website, the major difference being the resizing of elements and the manual horizontal scroll (done intentionally to preserve the experience). Card menus no longer stack. They’re instead presented as a list view of cards, which is all to say that the mobile website does away with animations to simplify the experience, while still upholding the brand’s visual identity on smaller screens. 08. Moon Rabbit Acupuncture Moon Rabbit Acupuncture's website features high-resolution images, a light color palette, hover effects and a thin typeface to draw attention to the main focus of their website: the benefits of acupuncture and holistic healing. Overlayed menus and product shots invite visitors to explore their various offerings, from booking a service, to shopping their products. The first thing you’ll notice when viewing the site on mobile is how well images scale down to accommodate narrower screen sizes. Scroll on and you’ll notice that the various grids of assets change so fewer elements clutter the screen per row. 09. Visual Identity Co. Visual Identity's website showcases a striking animated visual right as you enter the landing page. The animation toggles between a gold or purple color at the click of a button. Below, scroll effects like text fill and resizing elements give the website a sense of flow within the movement. The portfolio highlights a diverse range of projects, demonstrating the agency's ability to create impactful visual identities for clients. Not much changes on mobile, which is a sign of a highly responsive website. Whereas some mobile websites opt out of animated effects, Visual Identity preserves all of the same elements (including a clock that displays the current time in the agency’s hometown of India) that make its desktop version so effective. 10. Scopetheory Scopetheory keeps their site simple above the fold, using a blank white canvas for a background, a custom typeface and a pared-down navigation menu. As you scroll, things start getting interesting: the brand’s client work is presented in a grid which starts to stack up as you travel further down the website. On mobile, the approach is somewhat different; you no longer need to scroll down to be greeted with visuals. Rather, they appear above the fold. The stacking effect still stands though, as does the chat function. An interesting note: Scopetheory brought the "client impact" section up higher on mobile (perhaps to adjust to different expected behaviors between mobile and desktop, or else to emphasize the most important elements first). 11. Esperia Advocacy Esperia Advocacy adds subtle design touches that set its site apart from other company sites in the space: architectural imagery, a mix of italicized and serif fonts, an eggshell background and an oversized, halfway-cut-off footer. It all translates quite well on mobile. The company doesn’t remove anything from the mobile site, opting to maintain the same appearance on all devices. Here, the assets have a little more room to breathe, which makes for a more scrollable experience overall. 12. Product Hiring House Product Hiring House's website combines multiple effects for a memorable experience. These effects include a sticky header, items that move on scroll (like the venn diagram that squeezes the two circles closer together), hover effects and sliding image galleries. When paired with a rich paper background, a glassmorphic effect and gorgeous landscape photography, you get a website loaded with texture and engaging functionality. The same holds true on mobile - though it’s all resized. The grid takes on a more vertical alignment here, though the animation effects are preserved. It makes for a seamlessly responsive website that feels similar across all touchpoints. 13. KlikArch KlikArch's website greets you with a bold sans-serif font that tells you a little about what the brand does. However, it’s only when you scroll below the fold that you see their work in action. Their header disappears into the top of the screen as you scroll down, revealing product images and team headshots that decorate the screen instead. Transitioning the site to mobile affords more whitespace when you first land, though as you scroll you’ll find that the contents end up taking most of the space. It’s an interesting play on dimensionality when resizing the website. 14. Strategy Folk Strategy Folk's website is clean and minimalistic on entry, with a little robot animation that runs across the screen. As you scroll, design assets like text boxes, buttons, cards and more robot animations spring on screen to add movement and excitement. You’ll notice a lot of whitespace on the website, which helps it scale down effectively on mobile. On mobile, the elements appear tighter together, indicating that you can scroll below the fold to see more. That said, everything behaves relatively the same as on the desktop site, providing a cohesive experience across all screen sizes. 15. Change the Game Studio Change the Game Studio's hyper-colorful site is a perfect representation of their ethos: chaotic innovation. Oversized text, unique fonts and maximalist style help the brand go against the grain, and abstract shapes, graphics, patterns and typographies add an extra pop. The same look and feel is maintained on mobile, with a resized grid that’s more scroll-friendly. The menu is a bit tighter, but they’ve chosen not to use a burger menu in place of displaying the full list of options up front. It’s as visual as it is conceptual: see for yourself! 16. Praagya Praagya's portfolio website leverages hover display effects against a tv static backdrop to achieve a bold and differentiated aesthetic. Sharp visual and conceptual design lays the groundwork for his portfolio, which merges print, image making and strong use of creative hover interactions. For static homepages like this one, you have to pay meticulous attention to detail and spotlight the work itself. Switch over to a mobile view of this website to see how brilliantly responsive this website truly is. All the hover displays run automatically, but the website is perfectly spaced to fit them all accordingly. It demonstrates the power of playing to your device’s interactions to shape the experience of the web design itself. 17. Aura Studios Aura Studios' showcases simple grid layouts that lets the content do the talking: rich photographs of gorgeous travel destinations and epic getaways. It’s a creative agency that wields a strong sense of elegance in simplicity on its homepage. The brand exudes lavishness, from its rich earth-toned color palette, to aspirational imagery and snippets of punchy typography. The site responds well to narrower dimensions too, with a nearly identical mobile experience just with tighter shots of the same images used for desktop. While the text scales to two lines for more breathing room, the proportions of all other assets are kept the same. 18. The Forestta The Forestta's features several scroll effects against a leafy green background, including parallax images, side scrolling text and cards that overlay on top of one another. It’s a fun design that showcases some of the delicious food you can expect to find there, with a color palette that perfectly complements the images the brand chose. On mobile the same site behaviors are maintained, with the grid shrinking down to single content per row. In all instances, the website prioritizes usability with clear CTAs to book a table, order online and check out the menu. 19. The Benev The first thing you’ll notice upon entering The Benev's website is the custom ‘B’ shaped cursor, which appears as the rest of the website loads. From there, slightly washed-out videos and imagery give an ethereal touch to the website’s branding. All the content is laid out in a dynamic, non-modular grid that fills the page in an unexpected way. On your phone, the grid snaps into a modular shape, reducing the amount of visual stimulus that would otherwise be there if the grid were simply shrunken down instead. It's one of the best responsive website examples to demonstrates how blocks of content can scale well across various screen sizes. 20. YNK Young Na Kim (YNK) combines text and image scroll effects to give a bold landing page some extra dynamism. The focus of the website is clear: to showcase the selected portfolio pieces in a section below the fold, incentivizing people to get in touch. Resized on mobile, the website behaves exactly the same, now with a little more whitespace. Square images turn to circles as you scroll, and moving text also combines to give the experience an added sense of dimensionality. Why should websites use responsive design? Almost 60% of website traffic in 2023 came from mobile devices, so it's essential to optimize your sites for small mobile screens in addition to standard desktop. Responsive design allows a single website to be optimized for all devices, rather than maintaining separate websites for desktop, tablets and mobile. Where can I find responsive website templates? Creating a responsive website from scratch can be challenging because you have to arrange site information for each device it might be viewed on. A website template can thereby be a real time-saver,  offering a ready-to-use solution that you can still fine-tune and customize. Wix Studio offers an excellent collection of responsive website templates that feature unique visual attributes, such as crisp typography and well-crafted animated effects. So how do you make a great responsive website? The first thing that you need to do is to learn the principles of good website design. Those principles are universal and apply to any type of website. After that, you can dive into the specifics of responsive design. Maintaining a flexible website layout is critical for designing responsive websites because it allows you to edit your existing designs instead of recreating them from scratch. Use Wix Studio’s responsive AI as a starting point to shave off hours spent on adjusting your layout and the corresponding elements by hand (you can always set custom breakpoints or make design adjustments afterward). From there, consider other web design standards to smooth out user experience across all screen sizes. This includes taking a mobile-first approach; designing for thumb, touchpad and mouse interactions; creating websites with a singular call to action to reduce friction; and using fluid layouts by default (including designing with percentages rather than pixels and using SVG images that scale well). As a generality, a minimalistic design enables your website to scale effectively without running into loading issues or interaction errors. Check out this guide on how to make a responsive website for the full rundown on responsive design. What makes a website responsive vs. non-responsive? Responsive websites scale up and down automatically to respond to the size of your browser. That means that whether you shrink the browser on your desktop by holding and dragging your mouse, or switching to view a website on a tablet or phone instead, you’ll get a similar experience retro-fitted to the device you’re on. Responsive websites: Faster page load speeds Increase your conversion rates Provide better user experiences Strengthen your SEO performance Keep mobile device users more engaged Decrease bounce rates because of faster load times Future-proof your website to stay ahead of the curve Reduce maintenance costs of having multiple sites with responsive design Making websites responsive is a best practice among agencies to ensure a seamless, unified experience across all breakpoints. If you don’t do this for client sites, your clients’ users will likely need to pinch and zoom to navigate the website because it will display a desktop-friendly design on mobile, or, more realistically, your visitors will bounce. Best practices for creating a responsive website Practice mobile-first design. Start your design process with the smallest screen size in mind. It will help you identify and prioritize the most important content for your web page. That’s different of course than when you actually build out your website on Wix Studio (since you should build from desktop screen size down), but the actual design process should start with mobile because most users visit sites online in their phones. Set media queries. CSS media queries define different screen sizes and make a web page adapt its layout to different screen sizes. Among media queries, a category of breakpoints defines the widths of devices. Commonly used breakpoints are mobile (480px), tablet (481px - 7689px), desktop (779px - 1024px) and TV screens (201px+). Optimize images. You need to make sure that the images you use are optimized for different devices, so they look great and load quickly no matter where a user comes across them. That’s where image optimization comes in—it’s the process of resizing images for different viewports. This helps to reduce page load time and improve the site's performance (especially on mobile devices). Test your design on multiple devices. You have to test your website on various devices to ensure it looks good and functions properly on different screen sizes and resolutions. Contextualize the aesthetic to different screen sizes: your mobile view shouldn’t be a 1:1 clone of your desktop website. Rather, you should adjust the design accordingly.