Salesforce Marketing Cloud is a technically challenging software to use. You need to be a jack of multiple trades to use it to its maximum potential. You need to visualize intricate workflows clearly, accurately score and grade the leads, create effective segmentation and personalization strategies, and keep testing at regular intervals. That’s just the tip of the iceberg. You need to handle so many other things to implement marketing automation using SFMC. 

Here are some of the best practices that will allow you to stay ahead of the curve while using SFMC:

1. Take baby steps

Implementing large, complex processes from the get-go can be overwhelming for an average marketer. So, you must take baby steps and start with the activities that bring the biggest results through the smallest effort. At the outset, automate the repetitive tasks in the workflow. Choose low-effort, low-risk, and high-returns tasks that will not hamper your ongoing operations. 

2. Understand the flow thoroughly

Try to understand the entire process rather than automating any individual point within the process. Document and map the complete workflow. Then, identify the opportunities for automation. This will help ensure that you can build effective solutions that perfectly match the existing processes. It will also help you meet the program goals. 

3. Avoid giving in to the temptation to try out advanced features

Salesforce Marketing Cloud keeps adding new functionalities in the tool every now and then. For example: It is quite likely that Einstein Send Time Optimization will eliminate send times based on anecdotal logic instead of data. 

While it can be tempting to be the early adopters and start using them right away, it is advisable to focus on the current goals and processes you have chalked out. It might also lead to spoiling the entire project and cost you exorbitantly. Therefore, the best bet is to stay focused on the existing features and task at hand. You can always try out the new features after successful completion of that project. 

4. Use journey settings as business requirements

Always consult the business stakeholders and get them to review the settings before activation. For instance: Discuss with the decision makers how they want to configure contact entry mode — No re-entry, re-entry anytime, or re-entry only after exiting. 

5. Employ watertight customer segmentation strategies

Define a powerful customer segmentation strategy by finding answers to questions like:

1. Most significant actions to identify how a customer engages with your brand
2. Actions or behavior that qualify someone as an engaged customer
3. Opportunities to upsell to “somewhat” engaged customer or get them excited about a new feature or product launch

After identifying the segments, you must find the data within your organization or get together with an analytics team to plan the data architecture strategy by defining the customer aggregations. 

Take into consideration whether you will be able to find a resource with SQL skills while defining the data strategy. Such resources can create custom segments inside the Marketing Cloud with the data. It is advisable to have access to this skill set. However, there are drag and drop tools such as DESelect using which users without SQL skills can also execute complex segmentations. 

6. Carry out IP warming

If you are a new user looking forward to sending more than 100k emails per month, carry out IP warming to establish a favorable sender reputation. 

Here’s how to carry out IP warming correctly:

7. Utilize the power of Content Detective

Content Detective is a tool within SFMC Email Studio that allows you to keep the messages out of the subscriber’s spam folders. They recognize phrases that can trigger the spam filters and help in curbing deliverability issues. 

8. Take help of Subscriber Preview 

Subscriber Preview allows you to steer clear of any personalization blunders in email. Imagine someone receiving an email saying “Hey {Fname}”. With the help of the Subscriber Preview feature, you can check how an email will look like for a particular subscriber. As a best practice, identify the testing personas to make sure that your personalization is on point. You can do this through live or real subscriber data or with the help of ‘dummy’ test data that cover all the scenarios. 

9. Use Journey Builder’s test feature

The test mode along with a data extension enables you to view the simulated paths through the customer’s journey without the need to send messages to them or affecting tracking or reporting. It emulates random and decision split activities while ignoring wait times and contact entry settings. You will be able to get an exact view of the entire journey workflow without waiting. Once the test is complete, you will see the contact’s expected path on the journey canvas. This feature goes a long way in saving time. You no longer need to wait for 2-3 weeks to figure out whether it is configured correctly. 

10. Invest in a deliverability monitoring tool

A deliverability monitoring tool like Inbox Monster allows you to carry out unlimited inbox placement tests and elaborate deliverability analytics. It can be easily integrated with SFMC and you will get a complete suite of professional services and collaboration tools. It will also help you avoid getting blacklisted. Such tools make sure that you abide by the email sending best practices and stay away from spam traps.

11. Take the minimalistic approach

The key is to keep even the most advanced campaigns simple. With the help of Journey Builder, you can create elaborate multi-step campaigns that have several activities on the canvas. However, it is recommended that you keep it simple for the best functionality. Just because a feature exists does not mean you have to use it. When you create a complex campaign, you will find it tough to manage, maintain, and debug it. So, the bottom line is to create it as minimalistic as possible. Follow the “crawl, walk, run” approach and gradually advance to marketing automation maturity. 

12. Always follow the generic best practices

Just because you are using a powerful and advanced tool like SFMC, you cannot do away with the best practices. You have to create engaging content, keep it brief and specific, and create actionable CTAs that immediately draw attention. Also, keep the image to text ratio at 20:80 to avoid any deliverability issues. 

Wrapping Up

SFMC is a robust marketing automation tool that can open up new conversion opportunities and drive faster business growth, if used correctly. Through these tips, you will surely be able to propel sales and achieve unmatched results from your campaigns. 

For more insights, visit the insightful infographic created by the folks at Email Uplers: Salesforce Marketing Automation best practices from 11 global SFMC experts

The post SFMC Automation Best Practices to Beat the Competitive Bottleneck in Email Marketing appeared first on noupe.

There are a lot of dark, retro vibes trending in website design right now. Although there are still some light projects popping up – including a pastel trend below – a lot of what we are seeing has a quite moody feel.

Here’s what’s trending in design this month.

Pastel Color Palettes

Let’s start with the trend with a lighter feel – pastel color palettes. While much of the web is trending toward dark aesthetics, there’s a segment that’s going in the exact opposite direction. Those sites feature soft, pastel color palettes that serve as a balance to all the super dark websites out there.

One thing about this website design trend is that it jumps out because of the stark contrast with all of the dark color palettes out there.

Each of these designs seems to use a pastel color palette as the basis for a background. A blur effect is paired with the colors to use pastels in a way that has a natural feel without appearing too feminine or light.

Robust uses blue and earth tones for a pastel background that feels modern and strong when paired with the hard-edged headline font.

Atmos uses a light pastel theme that takes you through the clouds with blues, and pinks, and purples. The pastel color scheme works well with the content which is airline-themed and makes you feel like you are flying through the sky. The colors are also soft enough to provide an easy reading experience.

Klezma is another design with the same pastel background with graduated color. The peach tones are fairly neutral and give plenty of room to the content.

Fonts with a Distinct Retro Look

Every one of these websites uses a typeface with a similar look and feel. This retro headline style is trending in a major way.

The best way to use this design element is for short words. This typeface design isn’t meant for a lot of words or when readability is a high priority.

This style is all about creating a specific kind of vibe for your website. The typefaces in this trend have a quite retro look and feel with an almost 1960s or ’70s feel to them. The rest of the design mimics this feel as well with colors and surrounding elements that contribute to the overall look.

A couple of common elements here include the use of all capitals font sets and letterforms that include odd shapes and lines.

Sretks not only uses a retro typeface but bends and twists it a bit too to add to the old-school feel. The background color helps add to the groovy vibe.

Barge 166 uses a retro typeface with the same design feel as the other examples but with a sharper, more serif-style edge. It’s easier to read but still carries a retro look and feel. Use a typeface similar to this if you want to capture that retro font style for a trending look while maintaining as much readability as possible. This option works best for multiple lines of words in a large size.

Picky Joe uses a retro typeface with rounded letters and a bit of a tilt to the characters to create a distinct feel. This is definitely a style that has to be used sparingly but can be a fun option, depending on the content of your website design.

Dark “Product” Sites

Dark mode design is probably the biggest design trend of 2022. Everywhere you look, websites are using dark color palettes and styles. Designers are creating more projects with a dark/light toggle so users can control their experience.

This visual concept is carried over to website designs that feature products as well. This is one of the last places the dark aesthetic had not touched. It’s been a bit of an unwritten rule that product images should be on white or light backgrounds to help make them easy to see and inspect digitally.

This design trend bucks that idea and features products on dark backgrounds – some with so little contrast that you almost have a hard time seeing the products. (Maybe these brands are banking on the idea that you already know them or are selling a lifestyle product.)

HQBC sells bike accessories such as glasses and helmets and the site has a sleek look and feel. You know it is cool from the second you land on it. The question though – is there enough visual information with the dark background to help you make a purchase? This design probably works because it only encourages you to find a physical location to make a purchase rather than buy online.

Doggystyle Shop also banks on the idea of you knowing the shopping experience or brand when you arrive. What the design does do though is put products on white backgrounds after you have clicked through far enough to make a commitment to buy. This helps you see the product well one final time before making a purchase. (The challenge is that it is three to four clicks in for the most part.)

FirstFit uses the design trend in a way that’s similar to the first example. They are showing a product, but not actually trying to convert sales on the website. Other links take you to more product information and content – using a lighter background and color scheme – and the dark background with the product serves mostly as a highly visual landing page that will help entice users to learn more. When it comes to dark mode and products, this seems to be the best option for most website designs.

Conclusion

The state of the world around us and our emotions can play hard into websites and other design projects. Some of the darker elements that are popular now may be a reflection of that or it could be more of a lean into dark mode schemes.

Either way, the web has a pretty dark feel right now.

Source

The post 3 Essential Design Trends, July 2022 first appeared on Webdesigner Depot.

Right after “Where is the best place to learn?” perhaps the most commonly asked question I hear from folks getting into code is “What web development books should I get to learn?” Well, consider this an answer to that question as I’ve curated a list of books that are not only great for getting into front-end development but also freely available.

Books on CSS

This is the bulk of where we’re going to hang out because, well, this is a site mostly about CSS!

The Magic of CSS by Adam Schwartz

• Perfect for: Next steps in your CSS journey
• Learning level: Intermediate
• Requires: Some basic understanding of CSS

Adam Schwartz covers six CSS concepts in this book, including the box model, layout, tables, color, typography, and transitions. These are things even stump some seasoned CSSers, some of these concepts might be confusing. Adam has gone to a great length to demystify each.

In addition to the book being a great primer on complex CSS concepts, I love how each of the CSS properties mentioned throughout the book is clickable so you can always click on them to see how each is applied. There are many illustrative examples and recommendations for further reading, should you desire to learn more about each chapter.

I found the chapter on colors very interesting not only because it gets into the best practices for using color accessibly, but also because there’s super practical applications, like when Adam gets into using CSS to support an organization’s branding.

Resilient Web Design by Jeremy Keith

• Perfect for: Developing strategies for writing code
• Learning level: Intermediate
• Requires: Some basic understanding of CSS

Straight from the introduction:

You won’t find any code in here to help you build better websites. But you will find ideas and approaches. Ideas are more resilient than code. I’ve tried to combine the most resilient ideas from the history of web design into an approach for building the websites of the future.

What Jeremy does so well is describing soft skills, like planning, outlining, and approaches for writing code. So, rather than dropping in code snippets throughout the book, what you’ll find are details about code strategies, such as progressive enhancement, deciding on what tooling to use, and the challenges of writing future-friendly code.

And for those of you who have not had the pleasure of listening to Jeremy narrate content (like he does in the Web History series), there’s an audio file available to download.

Beginning CSS Web Development: From Novice to Professional by Simon Collison

• Perfect for: The fundamentals of CSS
• Learning level: Absolute beginners
• Requires: Nothing but time and motivation

It may be written in 2006, but Simon’s coverage of web standards and accessibility is timeless and relevant today. He provides an understanding of interoperability as well as approaches for building web applications, including the early planning phases that often go overlooked.

The book has two broad parts which are further divided into 16 chapters. Part 1 covers CSS topics, like working with text, links, lists, backgrounds, images, tables, and forms. It really doesn’t skimp on the details either.

Part 2 is all about layout, shedding light on usability and layout manipulation, plus a handy case study. The chapters are arranged in such a way that one chapter naturally flows into the next. Each chapter also contains a concluding section that highlights all the important concepts covered in the chapter.

Indeed, the book provides novice developers a solid background in CSS and helps them gradually with more advanced concepts. It will make your CSS journey easier.

Books on HTML & CSS

CSS and HTML are often taught together, which can be especially helpful when you’re writing your first lines of code and want to know how the two languages interact with one another.

Learn to Code HTML & CSS by Shay Howe

• Perfect for: Starting your front-end journey
• Learning level: Beginners
• Requires: No prior experience at all

Shay refers to this book as a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. He does this by focusing on common elements of front-end design and development. Some of the lessons covered are Box Model, Positioning, Typography, Background and Gradients, Lists, Media, Forms, and Tables. In the first chapter *Building Your First Web Page, Shay analyzed the contents of a typical website including elements, attributes and setting up the HTML document structure, code validation, selectors and CSS resets. I find the book very instructive especially as it went beyond the surface to address many key concepts with code samples, which you can follow along.

One profound thing about this great book is that, Shay built a complete project from scratch throughout the 12 lessons and at the end of each lesson, he provided a summary and links to the current state of that website (so you can compare with yours if you follow along) and the source code at every stage of the lessons.

If you’re a learner who learns by doing, you will find this material very useful and by the time you’re done, you will have developed a multi page functional website.

An advanced sequel of the course is also available free via the same link.

HTML & CSS: Learn the Fundamentals in 7 Days by Michael Knapp

• Perfect for: Starting your front-end journey
• Learning level: Beginners
• Requires: No prior experience at all

Can you possibly learn everything there is to know about the HTML and CSS in seven days? Probably not, but that’s why this 2017 book by Michael Knapp is focused straight on the fundamentals. Michael delves into a brief history lesson before launching into HTML and CSS structure, logic, and presentation. You’re going to get all up to speed to the point where you should feel pretty confident about putting a basic webpage together, plus a few extras along the way as the book touches on SEO and analytics.

The book is comprised of simple programs that you can run on your computer if you wish to follow along.

The ebook version is available for free on Apple Books, but there is a Kindle version as well if you already have a subscription there.

The Greatest CSS Tricks Vol. 1 by Chris Coyier

• Perfect for: Marveling at what CSS can do
• Learning level: Intermediate
• Requires: Some CSS experience

Did you know that CSS-Tricks has a book on CSS too? It would be silly to leave that off this list because what you get is a collection of classic CSS trickery that’s explained by none other than Chris Coyier. In fact, Chris handpicked all of the examples covered in the book from his many, many (many!) years running this here site from the plentitude of tricks that have crossed his desk.

Each trick solves a particular pain point. For instance, the first “Pin Scrolling to Bottom” trickdemonstrates how the overflow-anchor CSS property can be used to create the same chat-like interface of a tool like Slack, where the screen is anchored at the bottom in a way that feels as though the page is scrolling for you as new items are added.

Books on process

Code is just as much about how we write code and collaborate on projects with others as it is about the actual code we write. The following books are great starting points for everything from planning and project management to communicating and collaborating with others.

Collaborate: Bring People Together Around Digital Projects by Ellen De Vries

• Perfect for: Being a better collaborator
• Learning level: N/A
• Requires: An open mind to working well with others!

Ellen addresses something in this book that we all have to deal with: collaborating with others. And it’s no small deal — the book is divided into four parts that go super deep into things we can go to work well with others:

• Know how to prepare the ground and create the right conditions for collaboration.
• Nurture the group culture in the early stages of collaboration.
• Maintain a healthy collaborative process.
• Reap the rewards of a collaboration.

As a content strategist, Ellen has the right kind of experience to help anyone be part of a collaborative project, or get the most from a collaboration.

The Modern Web Design Process by webflow

• Perfect for: Senior designers, project managers
• Learning level: N/A
• Requires: Some basic understanding of CSS

This free ebook features a seven-step design process that’s meant to help define the workflow for today’s brand of web design.

That includes:

• Setting goals
• Defining scope
• Sitemaps and wireframes
• Working with content
• Handling visual elements
• Testing
• Shipping

Anyone starting a new design project or in the middle of a design project will find the invaluable insights throughout the book. And what’s most remarkable is how this is written in a way that almost feels as though you are being hand-held through an entire project from concept to completion.

Designing for the Web by Mark Boulton

• Perfect for: Learning to work with clients
• Learning level: Beginners
• Requires: A genuine interest in design

It seems many organizations tackle design differently. But author Mark Boulton documents a thorough design workflow in Designing for the Web that de-mystifies many challenges and covers everything you need to know.

What’s unique about this book is that it’s really about work. Sure, there’s a bunch of hugely valuable information on design best practices for things like typography, color, and layout, but what you’re really going to take away from this book is how these fit into a design workflow. It teaches you how to research, the technologies we have to implement ideas, and ultimately, how to work with others as well as clients — perfect fodder for folks including design leads, project managers, freelancers, or anyone who’s involved in the project delivery process.

Learn Version Control with Git by Tower

• Perfect for: Mastering Git
• Learning level: All levels welcome
• Requires: No prior knowledge at all

In this book, the team behind the popular Tower client for Git introduce learners to the crux of version control system using Git. Developers who work in teams will particularly find this very useful, as it helps in effectively collaborating with team members building different features of a project even when you’re thousands of miles apart. That said, it’s still really great for anyone who might be shy of the command line and wants to build confidence there.

And since the book is by the maker of an application that interacts with Git, you’re going to get a nice dose of using Tower as a GUI in addition to working directly on the command line.

So, whether it’s committing, branching, merging, pull requests, forking work, or handling merge conflicts, you’re going to get a whole lot from this book.

Books on JavaScript

Learning JavaScript always seems to be en vogue. In fact, Jason Rodriguez wrote about the JavaScript learning landscape in 2018 and provided a nice list of free books. Not too much has cropped up since then, but here are my thoughts on the following books.

Eloquent JavaScript by Marijn Haverbeke

• Perfect for: Getting better at writing JavaScript
• Learning level: Intermediate to seasoned developers
• Requires: Prior JavaScript experience

Eloquent JavaScript really lives up to its name. Personally, I consider this one of the best-written JavaScript books I have ever come across. Marjin’s writing style is engaging, especially with how he introduces programming concepts and carries the reader along. In his words, the book is simply about instructing computers and making them do what you want them to do.

The book is a deep dive into JavaScript spread across three parts and 21 chapters. You’re going to read a bunch about basic programming concepts, such as values, types, operators and functions, to advanced concepts like regular expressions, modules, the DOM, and asynchronous programming. He starts every chapter with a somewhat philosophical quote to prepare the reader for what lies ahead and then dives straight into the topic.

Plus, there’s three projects to help you practice your newfound skills.

Understanding JavaScript Promises by Nicholas C. Zakas

• Perfect for: Those who want to learn all about asynchronous programming with promises in JavaScript.
• Learning level: Intermediate
• Requires: Basic JavaScript chops

JavaScript promises were introduced in 2015 as part of the ES6 specification to handle asynchronous functions in JavaScript. According to MDN:

A promise is an object representing the eventual completion or failure of an asynchronous operation

In this 51-page book, Nicholas explains the concept of Promises over three chapters: Basics, Chaining Promises, and Working with Multiple Promises. Although the link to the book we’re providing is the free community version, the full version (available on Amazon) has two more chapters on Async Functions and Unhandled Rejection Tracking. Nicholas simplified the concept of Promises with several illustrations and examples. You will learn how to use then(), catch(), and finally() and understand how to chain multiple promises together. Nicholas also covers the assignment of rejection and settlement handlers. You may want to give the book a read to solidify your understanding of the topic.

Nicholas is a veteran JavaScript book author who has been writing about JavaScript for over 15 years. He brings his wealth of experience to bear in this book (just as he has in his work here at CSS-Tricks).

Speaking JavaScript by Alex Rauschmayer

• Perfect for: Leveling up from beginning JavaScript
• Learning level: Intermediate
• Requires: Knowledge of object oriented programming

This book is presented in four chapters covering more than 30 topics. Here’s how it breaks down:

1. The first chapter is a nice refresher on syntax, variable types, functions and exception handling.
2. The second chapter offers historical perspective into JavaScript as a prelude for the types of features covered throughout the rest of the book.
3. Chapter 3 is presented as more or less a reference book with short, clean examples.
4. The final chapter outlines tips, tools and libraries to help write better JavaScript and follow best practices.

Secrets of the JavaScript Ninja by John Resig and Bear Bibeault

• Perfect for: Creating a cross-browser JavaScript library from the ground up
• Learning level: Intermediate
• Requires: Some prior programming experience

There’s actually a newer edition of this book, but the 2012 edition is the one that’s free. Either way, it’s a good opportunity to learn from John Resig; you know, the guy who created jQuery.

The techniques covered here include closures, functions, the DOM, object orientation with prototypes, and cross-browser strategies. One nice perk is that each chapter is followed by a brief recap that’s perfect for a reference once you’ve finished the book.

Learning JavaScript Design Patterns by Addy Osmani

• Perfect for: Learning to write more efficient JavaScript
• Learning level: Intermediate
• Requires: A decent level of JavaScript experience

The concept of design pattern refers to a reusable solution to a commonly recurring problem in application development. In this book, Addy Osmani covers the implementation of common design patterns using ES6 and beyond, as well as React-specific design patterns, which can be super handy when working on complex React apps where maintainability is a primary goal.

Some of the patterns covered include Singleton, Proxy, Provider, Prototype and Observer patterns. In some cases, Addy includes pros and cons of using some of these patterns and how they may affect the performance of your application.

You Don’t Know JS by Kyle Simpson

• Perfect for: Mastering JavaScript
• Learning level: Beginner
• Requires: Little or no prior programming experience

While the title might be a bit provocative, what Kyle is implying here is that he writes this book assuming you have no prior JavaScript experience whatsoever.

Kyle begins starts by going through the rudiments of programming as seen through the lens of JavaScript. He then proceeds, in subsequent chapters, to introduce more advanced concepts like scope and closure, the this keyword, object prototypes, async, and performance.

There’s a lot of excellent details and explanations in here, and Kyle makes it super easy to understand by avoiding super technical jargon. There is also many exercises designed to reinforce your learning. This book will definitely get you up to speed with JavaScript. There’s second edition of the book in the works that you can track in GitHub.

The JavaScript Beginner’s Handbook by Flavio Copes

• Perfect for: A beginner’s reference
• Learning level: Just getting started
• Requires: Email sign-up, maybe some prior experience

Flavio has put together a very useful JavaScript reference for those just starting out. It’s more like a quick reference guide than a textbook, so those of you just starting out might want to consider this as something you keep on your desk rather than something you sit with for long periods of time.

JavaScript for Data Science by Gans, Hodges & Wilson

• Perfect for: Getting into data visualizations
• Learning level: Intermediate to advanced
• Requires: A decent handle on JavaScript

The authors cover core features of modern JavScript, including callbacks, promises, inheritance, objects and classes. They also get into testing using Mocha, React, and data vizualization, all of which are great for anyone looking to level up their code and how its written. The book doesn’t get as deep into many the concepts as some of the other books, but it really shines when it gets into data science.

The book uses Data-Forge; a JavaScript library designed for working with tabular data. There are numerous exercises to help readers keep up to speed with the subject of discussion. The last chapter also includes a capstone project that pulls everything together.

Wrapping up

I sure hope this collection of books help you, whether you’re taking your first steps in front-end web development, have a dozen years under or belt, or you fall somewhere in between. I know how hard it is to get into something new for the first time and the feeling of not knowing where to look. I also know how it feels to hit a plateau and need something to level me up. There should be something for everyone here, regardless of where you are in your learning journey.

And, hey, if you have any other books that are available to snag for free online, please share them in the comments! I bet we can get an even bigger list going.

---

Great (and Free!) Web Development Books You Can Get Online originally published on CSS-Tricks. You should get the newsletter.

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

How to Create Simple CSS Grid System

Why are You Running?

15+ VS Code Extensions for Web Developers

10 of the Biggest SEO Mistakes [Infographic]

SVG Loading Animations

AI Pixel Art Human Face

VSLook – Customize the Look of your VSCode

One Line of CSS to Add Basic Dark/light Mode

Basicons – Basic Icons for Product Design & Development

Touch-first Cursor: Round Pointers Vs Mouse Arrows

7 UX Laws You’re Probably Getting Wrong

“Google” Programmers – How One Idiot Hired a Couple More Idiots

Bunny Fonts – Privacy Respecting Drop-in Replacement for Google Fonts

Source

The post Popular Design News of the Week: June 20, 2022 – June 26, 2022 first appeared on Webdesigner Depot.

We’ve looked at spinners. We’ve looked at dots. Now we’re going to tackle another common pattern for loaders: bars. And we’re going to do the same thing in this third article of the series as we have the others by making it with only one element and with flexible CSS that makes it easy to create variations.

Let’s start with not one, not two, but 20 examples of bar loaders.

What?! Are you going to detail each one of them? That’s too much for an article!

It might seem like that at first glance! But all of them rely on the same code structure and we only update a few values to create variations. That’s all the power of CSS. We don’t learn how to create one loader, but we learn different techniques that allow us to create as much loader as we want using merely the same code structure.

Let’s make some bars!

We start by defining the dimensions for them using width (or height) with aspect-ratio to maintain proportion:

.bars {
  width: 45px;
  aspect-ratio: 1;
}

We sort of “fake” three bars with a linear gradient on the background — very similar to how we created dot loaders in Part 2 of this series.

.bars {
  width: 45px;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

The above code will give us the following result:

Like the other articles in this series, we are going to deal with a lot of background trickery. So, if you ever feel like we’re jumping around too fast or feel you need a little more detail, please do check those out. You can also read my Stack Overflow answer where I give a detailed explanation on how all this works.

Animating the bars

We either animate the element’s size or position to create the bar loader. Let’s animate the size by defining the following animation keyframes:

@keyframes load {
  0%   { background-size: 20% 100%, 20% 100%, 20% 100%; }  /* 1 */
  33%  { background-size: 20% 10% , 20% 100%, 20% 100%; }  /* 2 */
  50%  { background-size: 20% 100%, 20% 10% , 20% 100%; }  /* 3 */
  66%  { background-size: 20% 100%, 20% 100%, 20% 10%;  }  /* 4 */
  100% { background-size: 20% 100%, 20% 100%, 20% 100%; }  /* 5 */
}

See what’s happening there? Between 0% and 100%, the animation changes the background-size of the element’s background gradient. Each keyframe sets three background sizes (one for each gradient).

And here’s what we get:

Can you start to imagine all the possible variations we can get by playing with different animation configurations for the sizes or the positions?

Let’s fix the size to 20% 50% and update the positions this time:

.loader {
  width: 45px;
  aspect-ratio: .75;
  --c: no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c),
    var(--c),
    var(--c);
  background-size: 20% 50%;
  animation: load 1s infinite linear;
}
@keyframes load {
  0%   { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */
  20%  { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */
  40%  { background-position: 0% 0%  , 50% 50% , 100% 100%; } /* 3 */
  60%  { background-position: 0% 100%, 50% 0%  , 100% 50%;  } /* 4 */
  80%  { background-position: 0% 100%, 50% 100%, 100% 0%;   } /* 5 */ 
  100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…which gets us another loader!

You’ve probably got the trick by now. All you need is to define a timeline that you translate into a keyframe. By animating the size, the position — or both! — there’s an infinite number of loader possibilities at our fingertips.

And once we get comfortable with such a technique we can go further and use a more complex gradient to create even more loaders.

Expect for the last two examples in that demo, all of the bar loaders use the same underlying markup and styles and different combinations of animations. Open the code and try to visualize each frame independently; you’ll see how relatively trivial it is to make dozens — if not hundreds — of variations.

Getting fancy

Did you remember the mask trick we did with the dot loaders in the second article of this series? We can do the same here!

If we apply all the above logic inside the mask property we can use any background configuration to add a fancy coloration to our loaders.

Let’s take one demo and update it:

All I did is updating all the background-* with mask-* and I added a gradient coloration. As simple as that and yet we get another cool loader.

So there is no difference between the dots and the bars?

No difference! I wrote two different articles to cover as many examples as possible but in both, I am relying on the same techniques:

1. Gradients to create the shapes (dots or bars or maybe something else)
2. Animating background-size and/or background-position to create the loader animation
3. Adding mask to add a touch of colors

Rounding the bars

Let’s try something different this time where we can round the edges of our bars.

Using one element and its ::before and ::after pseudos, we define three identical bars:

.loader {
  --s: 100px; /* control the size */

  display: grid;
  place-items: center;
  place-content: center;
  margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after {
  height: var(--s);
  width: calc(var(--s) / 5); /* 20px */
  border-radius: var(--s);
  transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i:  1; }

That gives us three bars, this time without relying on a linear gradient:

Now the trick is to fill in those bars with a lovely gradient. To simulate a continuous gradient, we need to play with background properties. In the above figure, the green area defines the area covered by the loader. That area should be the size of the gradient and, if we do the math, it’s equal to multiplying both sides labeled S in the diagram, or background-size: var(--s) var(--s).

Since our elements are individually placed, we need to update the position of the gradient inside each one to make sure all of them overlap. This way, we’re simulating one continuous gradient even though it’s really three of them.

For the main element (placed at the center), the background needs to be at the center. We use the following:

.loader {
  /* etc. */
  background: linear-gradient() 50% / var(--s) var(--s);
}

For the pseudo-element on the left, we need the background on the left

.loader::before {
  /* etc. */
  background: linear-gradient() 0% / var(--s) var(--s);
}

And for the pseudo on the right, the background needs to be positioned to the right:

.loader::after {
  background: linear-gradient() 100% / var(--s) var(--s);
}

Using the same CSS variable, --_i, that we used for the translate, we can write the code like this:

.loader {
  --s: 100px; /* control the size */
  --c: linear-gradient(/* etc. */); /* control the coloration */

  display: grid;
  place-items: center;
  place-content: center;
}
.loader::before,
.loader::after{
  content: "";
  grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{
  height: var(--s);
  width: calc(var(--s) / 5);
  border-radius: var(--s);
  background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s);
  transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after  { --_i:  1; }

Now, all we have to do is to animate the height and add some delays! Here are three examples where all that’s different are the colors and sizes:

Wrapping up

I hope so far you are feeling super encouraged by all the powers you have to make complex-looking loading animations. All we need is one element, either gradients or pseudos to draw the bars, then some keyframes to move things around. That’s the entire recipe for getting an endless number of possibilities, so go out and starting cooking up some neat stuff!

Until the next article, I will leave you with a funny collection of loaders where I am combining the dots and the bars!

---

Single Element Loaders: The Bars originally published on CSS-Tricks. You should get the newsletter.

Your website is the virtual front door to your business, and for that reason having a website that manages to engage and retain customers is vital. But what about attracting customers?

That’s where SEO comes in. Even though you may have a well-designed website, that’s not enough. If it’s not optimised for SEO, you’ll fail to attract high quality traffic. In an increasingly competitive digital landscape, it’s essential to perform well in the search results, for your targeted key terms.

To help boost your SEO, make sure you avoid these 9 web design mistakes:

Web design and SEO

A website needs to do more than just look good. While it’s important to maintain consistency in your web design with your brand image, not every web design choice will positively impact your SEO.

Search engine optimisation (SEO) is the process of optimising your website and content to increase search engine positioning. Implementing an effective SEO strategy helps to drive more high-quality traffic to your site.

To determine the ranking of pages in search results, Google (and other search engines) use bots to crawl pages on the web. The crawlers go from page to page collecting information about the contents of pages.

The information collected by crawlers allows Google to index these pages. Then, when providing listings for a search query, algorithms determine what order web pages should appear in search results.

The many ranking factors that can influence your positioning in the search results mean it’s increasingly important to focus more on the user experience of a website. Even the smallest of mistakes could significantly impact your SEO. Make sure you avoid these mistakes:

1. Poor navigation

Poor navigation affects both the user experience and your SEO. Good navigation is the hallmark of a positive user experience, and without it you are likely to see a high bounce rate.

It’s important to make sure that users can easily navigate their way around your site and find the content they are looking for. Visitors to your site will not jump through hoops to find something and will just leave your site if they get frustrated.

When navigation is one of the most important elements of a well-designed website, make sure it’s easy for users and crawlers to easily navigate and find content. You can improve navigation by:

• Implementing a clear and well-structured navigation menu or bar
• Create internal links throughout your site
• Create an XML sitemap
• Avoid using long pages or infinite scrolling
• Create a clear site structure

2. Not optimized for mobile

By the end of 2021 mobile devices accounted for 54.4% of website traffic worldwide. As more people use their smartphones to browse the web, it’s important to make sure your web design is fully optimized for mobile.

Considering how popular mobile devices are becoming, Google has now started to favor mobile-friendly websites. Google now uses a mobile-first indexing approach. This means Google will often use the mobile version of the content for indexing and ranking.

Google offers a free tool to check whether your web page is mobile-friendly. You can also check to see what your site looks like on different devices.

If you are using Chrome, right-click and select inspect. Then, at the top left of the inspect window, you’ll see an icon with a tablet and mobile. Click on that and you can change the dimensions, size and throttling of the display view.

Here’s an example on the Noupe homepage:

The best (and recommended solution by Google) is to use a responsive web design. All your pages use the same URL and content across all devices, but the site design responds based on the display size.

3. Slow loading speeds

Loading speeds have become increasingly important for web users. The longer it takes for your page to load, the more likely people are going to abandon your site and never return. Slow loading speeds will leave an unfavourable impression on your business.

Page load time is a ranking factor meaning that your SEO will be affected by slower loading speeds. Not only does it irritate users, but it also affects search engine indexing with crawlers being able to index fewer pages in their allocated crawl budget.

The general consensus is that your website should load within 2 – 3 seconds. You can check your page speed using Google’s free tool. To improve your page speed, consider:

• Optimizing images
• Minify your code
• Remove render-blocking JavaScript
• Enable GZIP compression
• Use a content distribution network
• Remove unnecessary plugins

4. No titles and headings

Headings should be used on all web pages, ideally before any other content. Not only do headings provide navigational pointers to different content on your site, but they also help crawlers understand the contents of a page when gathering information for indexing.

A heading should be identified on a page through an H1 tag and should encapsulate what the page is about. They essentially tell everyone the summary of your page’s content. After using an H1 heading for titles, you should use header tags for all subsequent headings.

All subsequent headings after your title should use H2-H6 tags. It then makes it much easier to tell what topics and subtopics are covered in a piece of content.

Not providing any titles and headings is a bit like a book without a title or chapters, so don’t forget to include them.

5. Thin content

Content that provides little or no interest or appeal to your users is classed as thin content. As well as providing nothing of any value to your readers, thin content can hinder your SEO.

Pages with thin content include:

• doorway pages (pages that are used to manipulate search engines to rank for a certain keyword)
• pages with little or no content
• content that has been automatically generated
• pages with keyword stuffing
• thin affiliate pages

As Google seeks to provide meaningful and relevant results to users, pages that use thin content will be penalised in the search results. Instead, if you want to rank highly in the search results, make sure your content has lots of rich information and keywords are used appropriately.

6. A balance between content and whitespace

A well-designed website will manage to strike the right balance between content and whitespace. Overloading your pages with content could be slowing down your speed, and it also creates a negative user experience.

Now that user experience is also a ranking factor in Google’s algorithms, you should be pulling out all the stops to try and create a meaningful experience on your site. Whitespace is something that can help you achieve that.

As well as finding the right balance between written and visual content, you should find the right balance between content and whitespace. Using whitespace is not wasting space as it allows your content to breathe. It’s also worth noting that whitespace can be any colour too, not just white!

Minimalist web designs focus on a less is more approach by utilizing whitespace.

7. Missing or unclear call-to-actions

Call-to-actions (CTAs) help guide your users to key areas of your website and can improve conversions. CTAs can be used for lots of different purposes on a site, whether to download a piece of content, submit a form, or make a purchase. Without them, a user is more likely to drop off your site, losing you a potentially valuable lead and increasing your bounce rate.

The CTAs you incorporate into your site need to be strategically placed in locations where a user is more likely to act. They should also adopt a language and tone that matches your brand.

Using certain words and phrases at the start of a CTA Using certain words and phrases at the start of a CTA can also help improve conversions through positive affirmations and speaking in the voice of your customers. Most importantly, the choice of color can make a big difference. Consider the psychology of color when using colors in your web design.

8. Annoying pop-ups

Pop-ups are a form of online promotion used for advertising or generating leads, usually in a small window. But pop-ups have gained an unfavourable reputation with web users for being irritating and disruptive, causing a bad user experience (which can also affect your SEO).

That’s not to say that you shouldn’t use pop-ups at all, just be careful about how you use them. When used successfully, pop-ups have an average conversion rate of 11.09%, helping to boost subscriptions, increase content offer downloads, and reduce bounce rate.

If you want to implement pop-ups without them being annoying and damaging your SEO, consider:

• Using them to help enhance user experience, for example with ‘exit intent’ pop-ups.
• Keep your pop-ups clear and to the point. Keep a consistent style and theme within your pop-ups as the rest of the page.
• Don’t use pop-ups for the sake of it. Instances of high traffic and high bounce rate could be an effective example of when to use a pop-up.
• Optimise for mobile
• Test to find the right placement and time to display pop-ups.
• Use slide-ins and slide-downs instead of pop-ups, as these tend to be less intrusive

9. 404 pages

A 404 page is an error page that is displayed to users when they have reached the requested domain, but no information is available on the searched URL. 404 pages are also displayed when broken or dead links are clicked on.

While most websites will incorporate a 404 page into their design, not all manage to work effectively at keeping users on their site. Many 404 pages will just display an error message without giving any guidance or instructions to keep the user on your site.

A 404 page is a fantastic opportunity to keep a visitor on your site and try and convert them to a customer. Include links to other similar content, provide an invitation to subscribe to a newsletter, or include a search bar for your site. If nothing else, at least provide a link back to your homepage.

By avoiding these 9 web design mistakes, you’ll be able to improve the design of your website, enhance the user experience, and keep your SEO in check! And remember, as user experience becomes increasingly important in SEO, it makes sense to focus on keeping your users happy. If you can do this successfully, you’ll be rewarded with increased conversions and improved rankings!

The post 9 Web Design Mistakes that Harm your SEO appeared first on noupe.

Well, they certainly sound like they’re all about the same thing.

When you design the user interface, surely what you are dealing with is user experience. Is it that simple? Or are there significant differences between the two? What consequences would such a difference have for design? Will there be any more questions in this paragraph? What do you think?

Let’s put both user experience and user interface under the microscope and see just what we’re dealing with. 

The Key Difference Between User Experience and User Interface Design

There’s one key specific difference between the two forms of design. Let’s look at website design. 

In this arena, UX takes in the entire user experience and uses this to design the website on the basis of feel. UI however looks at specific design elements, usually visual elements, and assesses how they direct user behavior on the site. 

So, there we are. Wasn’t too tricky, was it? Thanks and goodnight. 

Alright, then, you’ve got me. Nothing’s that simple. We need to dig into what we mean by the two terms before we know for sure what the difference boils down to. 

User Experience Design

Right, so User Experience design is about certain elements, but chief among these is that it is an approach that emphasizes how human users comprehend the user environment they’re put in. For instance, with contact centre call recording systems, the designer will be interested in the user state during each of the component tasks, from initial recording to playback and analysis. 

It’s all about what happens to the user and how the user is made to feel when they are given a product to manipulate. 

Here’s a word from somebody who knew a thing or two about UX design. 

‘You’ve got to start with the customer experience and work back toward the technology. Not the other way around’

Steve Jobs

What’s interesting here is what the turtlenecked tycoon doesn’t say. He doesn’t even mention the need for the product or the problem it’s trying to solve. For him, the key ingredient in design is how it impacts on customer experience. This is why his products are so enjoyable to use. 

Sure, the iPod solved a problem. It meant no more jiggling around between CDs (or even cassettes) while on the move. But the key impact that it had was born of the fact that it was a joy to use. From opening the packaging to using the earbuds, it was such a cool experience. 

UX design may be closely linked with technology, for instance working to prioritize landing page speed because of the effect it has on the user. But it’s not limited to the technology sector. 

Any product or service that a user has a relationship with can be shaped with the principles of UX design in place. It just so happens that it’s the arena of technology in which UX design has really taken off. This is because of two things:

1. Technology has become so ubiquitous that it’s important for it to be designed well. Everyone, or just about everyone, needs to be able to use it in the desired manner. If its design prohibits universality, then at best you have ‘Some User Experience, otherwise referred to as ‘SUX’ (observed engineer Billy Gregory). 

2. Technology has the potential to be really very unusable indeed. This is because, at heart, it’s completely alien to most non-technical users. There are some more primitive machines, for instance a spinning wheel, in which the process is fairly intuitive and one can muddle through a construct of the process in one’s head. 

   But a lot of the workings going on in devices or systems, such as eCommerce platforms, today are way way beyond what the average user can comprehend in any meaningful sense. So the design has to render an extremely complex array of processes and data flows down into a simple to grasp and use an item. 

What does a UX Designer Do?

The UX designer will factor several elements into their thinking. Remember, they’re concerned with how the product or environment or process or whatever it is being designed will impact on the user. 

For this to succeed, they often break down operations into task analyses. How easy is it, for example, to access the royalty free music youtube artist of a user’s choice? Can we make it a little easier? 

A UX designer will effectively act as the mortar at the center of the product team. This is because the feel of a product is key to its success. 

For this reason, then, a UX designer will interact with product developers to give them feedback on how their product is succeeding or otherwise. A UX designer will be part of the design process from the very first wireframing stage, through prototypes, testing, and iteration, to the finished product. 

UX designers will also interact with marketers to make sure that the product and its promotion are of the same voice. 

But a UX designer’s job doesn’t end there. They also are involved in data analysis regarding competitors (How do the competition’s products feel?), and customers (do we have a good idea of who our customers are and what they want?)

They will then also be involved in assessing usage data once the product is out there. It’s often down to the UX designer to improve upon the product’s usability or to jettison it in favor of the next step. 

We’ll finish on UX design with this nice quote.

‘User Experience Design is the science and art of designing a product so that it’s easy to use, fits expectations, and meets business goals.’

Susan Weinschenk, CEO, The Team W 

User Interface Design

UI is actually an older discipline than UX, but it can be trickier to define, due to the misinterpretations that have cropped up over the years. Here’s one immutable factor: UI is just about digital products. Its only valid usage is in the sphere of interaction between user and technology. 

UI design is all about looking at the device or system and making all the processes that affect the user as straightforward as possible. This means, in particular, an emphasis on optics. So, for a website, UI design will look closely at the fonts, colors, and icons used, as well as the spacing and overall layout on the screen. It will seek to make the important information as prominent as possible. 

The key aim of UI design is to enable the user to get where they want to go without having to think too much. If they have to claw their way through a process while referring to instructions galore, then the UI design has failed. 

What Does a UI Designer Do?

A UI designer will perform a lot of the functions that are covered by a UX designer, in terms of product inception and development, but will come at it from a predominantly visual perspective. So the UI designer will have a solid grasp of color theory and the effects on the user of certain forms of typography and design patterns. 

They will also be adept at utilizing the potential of different devices with different screen sizes. For instance, they will be very aware that online call conference solutions need to demonstrate good visual design on phones as much as on big screens. This need to make visuals work on all screens is emphasized by the rise in mobile website access.

While we’re on websites, it’s quite often the case that UI designers will have an extremely influential role over the eventual look of the whole site, and are in fact seen in some quarters as in the process of taking over the traditional web developer role.

Or, to focus on databases for a second, a UI designer will want to see to it that what can be an off puttingly data-heavy area, will benefit from great visuals so that users aren’t put off. Consequently, Elasticsearch Documentation, for instance, will be as friendly-looking as a UI designer can manage.   

It’s Not Either/Or

Here’s the thing about the difference between user experience and user interface. They may be different, but that doesn’t mean you don’t want to use both. Far from it. It’s in a combination of the two that really exciting user-centered design takes place. Whatever your output, whether a smartwatch or a killer means of meltdown and spectre testing, it will benefit from a blend of UI and UX. 

Let’s consider an app that gives you suggestions on what to cook for dinner. 

It may be fantastic at factoring in what ingredients you have and coming up with something delicious for you to put together from them. It may be super-quick at doing it too. It may even help you by putting in grocery orders where necessary. But if its colors clash and its font fail to stand out, then its design is lacking. 

In short, it has good UX design, but terrible UI design. 

It’s easy to conceive of the converse. Let’s say your business provides a hosted VoIP solution. The phones look amazing. But they’re impossible to use. That’s a great UI and awful UX. 

So, a blend of both is what’s required. 

To Sum Up

You should now be clear on the difference between UX and UI. If not, try this analogy: 

In other words, UX is all about the way the product feels to used in its intended setting. How easy is it to eat cereal with a spoon? UI is more about how the product comes across in the first place. How much do you want to use the spoon to eat the cereal? 

Put like this, it’s easy to see how co-dependent these pursuits are. If you’re going after one and not the other, you need to re-think your approach. So, wake up and eat the cornflakes.

The post UX vs. UI: Guide to Distinguishing User Experience and User Interface Design appeared first on noupe.

Starting your own business is a process with a fair share of challenges. Even in the web design world, where you can potentially minimize costs by working from home and collaborating with freelance contractors, many expenses exist. 

To run a successful web design business, you need enough money to invest in everything from skilled colleagues to resources (like fonts and themes), software subscriptions, and technology tools. Finding a way to fund your company can be the most complicated part of ensuring its success.

For most new companies, the easiest option to generate opportunities is “bootstrapping.” Learning how to bootstrap a web design business means knowing how to bring your business to life with virtually no starting capital. 

Here’s how to get started.

What is Bootstrapping? 

Successful bootstrappers take an idea, such as creating a web design company and create a fantastic company without the backing of investors. It takes significant dedication, commitment, and single-mindedness to accomplish your goals, but some of the world’s greatest entrepreneurs, like Steve Jobs and Sam Walton, got their start this way. 

The term “bootstrapping” comes from the phrase “to pull yourself up by the bootstraps,” which indicates overcoming challenges on your own without any external support. 

The pros and cons of bootstrapping include:

Pros:

• Full control: Bootstrapping allows entrepreneurs to retain full ownership over their business. Alternatively, engaging with investors means allowing other professionals to own a portion of your company or make a share of the decisions. 
• Innovation: Business owners in a bootstrapping model are forced to invest in agile and innovative business models. You must develop processes to produce immediate, lasting cash flow from day one. 
• Accomplishment: Building something from the ground up creates a powerful sense of satisfaction and accomplishment. 
• Ownership: You won’t have to sell any equity in your business to other investors, which means you can benefit fully from the company as it grows.

Cons:

• Risks: Self-funded businesses generally run out of funds faster and struggle to scale as quickly as other companies, limiting the brand’s ability to reach its potential.
• Limited support: Traditional financing methods (like working with investors) also provide networking opportunities and support from specialists who want to see your company succeed. 
• Pressure: Bootstrapping businesses need to be meticulous about everything from keeping books to making the right decisions for brand growth. 
• Hard work: With limited resources, connections, and options, bootstrapping entrepreneurs need to work harder than most and take on more roles.

How to Bootstrap Your Web Design Business: Step by Step

Bootstrapping a web design business can be complicated, but it works for many companies if you follow the right strategy. The good news is web design companies generally don’t require as much initial capital as some other types of companies, like standard retail brands or companies with a need for brick and mortar offices.

However, there are still steps you’ll need to follow to ensure success.

Step 1: Source Some Initial Funds

While you might not work with investors when bootstrapping your web design business, you’ll still need some essential initial funds. To run a web design business, you won’t necessarily need a massive initial investment, but you will need something. 

To determine how much capital you need to raise from your income, savings, a line of credit, or other common bootstrapping sources, think about:

• Where you’re going to work: The upfront costs of operating your own web design business will be a lot lower if you choose to work from home and with remote specialists. The less you have to pay for office space, the better.
• Business fees: You may need to pay fees for registering your business name, hosting your own website for advertising, and dealing with any registration costs.
• Equipment and software: Think about what you will use daily for web design. Subscription-based services like Adobe Creative Cloud can cost quite a bit to access. You’ll also need a good computer, and perhaps a tablet for sketching.

Step 2: Find a USP 

The easiest way to ensure a bootstrapped web design business is a success is to ensure you are offering specific clients something they genuinely need. In a service-based landscape like web design, you need to know what your customers want and offer something they can’t get elsewhere.

For instance, can you differentiate yourself from other web design companies by helping with modern trends like 360-degree video and XR-ready design? Can you build apps for companies from scratch and provide ongoing maintenance for the websites you make?

An excellent way to find your USP is to examine your competitors. Find out what other companies in your area are offering their customers, and listen to consumers in your industry when they talk about what they need from a website designer. 

Step 3: Choose a Cash Flow Optimized Model 

Since you’re relying only on your cash and the money you make from your web design business to fuel its growth, choosing a model optimized for consistent cash flow is essential. Bootstrapping a business often means you place most of the profit you gain from your company back into the development of the brand. 

With this in mind, consider how you’ll offer services and charge your customers. Are you going to ask for a portion of the fees up-front before starting a web design project? Can you provide your customers with subscription models to improve your revenue consistently?

For instance, you could provide help with ongoing maintenance, development, and support rather than just offering to build websites for companies. Another way to make additional income is with professional services, like consulting. 

Make sure there’s a market for the services you’ll offer before launching your business by examining the surrounding environments and services your competitors provide.

Step 4: Keep Costs Low and Profits High

Keeping costs low will be essential to ensuring your success when bootstrapping a business. Fortunately for web designers, it’s relatively easy to cut down on fees. For instance, WordPress is free to use for your development projects, making it an excellent choice for many web design strategies. 

You can also look into common free and cheap alternatives to web design tools online, like GIMP. Shop around for the things you will be paying ongoing fees with. For instance, it’s best to check out multiple vendors when looking for web hosting and marketing support. 

While keeping your costs low, it’s also essential to accelerate profits as much as possible. You can look for ways to boost customer retention by building stronger relationships with your clients and offering them deals on long-term subscriptions. 

If you have time outside of your web design business, you can also try taking on some side hustles. Options include:

• Selling web design assets on sites like ThemeForest
• Offering your services on a freelance basis with sites like Dribbble and Toptal
• Designing and selling NFTs for the metaverse
• Teaching web design or selling webinars

Step 5: Grow Cautiously

Finally, while the goal of successfully bootstrapping your web design business will be to grow as rapidly and consistently as possible, it’s important to be cautious. For instance, you’ll need to be able to afford the fees of every new designer you bring onto your team, so consider looking for freelancers and contractors rather than permanent hires.

Use organic channels for marketing your services, like blogging and content marketing which can help improve your SEO standing and attract attention among clients. Plus, encourage your customers to recommend your services to other brands. 

As new clients approach your business, ensure you only take on as many customers as you can reasonably handle. Compromising on quality will damage your relationships with customers and harm your reputation. 

Good Luck Bootstrapping Your Business

When you’re bootstrapping a business, you get the benefit of being able to eliminate any outside influences from your growth. You’re free to focus on building relationships with companies of your choice, and you get to make decisions about your growth. However, there are downsides, too, like significant stress and limited financial opportunities.

While bootstrapping your business is tough, if you manage to complete the process successfully, the results can be fantastic. 

 

Featured image via Unsplash.

Source

The post How to Bootstrap a Web Design Business first appeared on Webdesigner Depot.

We’re all familiar with the standard way of linking up a stylesheet to the of an HTML doc, right? That’s just one of several ways we’re able to write CSS. But what does it look like to style things in a single-page application (SPA), say in a React project?

Turns out there are several ways to go about styling a React application. Some overlap with traditional styling, others not so much. But let’s count all the ways we can do it.

Importing external stylesheets

As the name suggests, React can import CSS files. The process is similar to how we link up CSS file in the HTML :

1. Create a new CSS file in your project directory.
2. Write CSS.
3. Import it into the React file.

Like this:

import "./style.css";

That usually goes at the top of the file where other imports happen:

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

In this example, a CSS file is imported into an App.js from the /Components/css folder.

Write inline styles

You may be used to hearing that inline styling isn’t all that great for maintainability and whatnot, but there are definitely situations (here’s one!) where it makes sense. And maintainability is less of an issue in React, as the CSS often already sits inside the same file anyway.

This is a super simple example of inline styling in React:

<div className="main" style={{color:"red"}}>

A better approach, though, is to use objects:

1. First, create an object that contains styles for different elements.
2. Then add it to an element using the style attribute and then select the property to style.

Let’s see that in context:

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

This example contains a styles object containing two more objects, one for the .main class and the other for a text input, which contain style rules similar to what we’d expect to see in an external stylesheet. Those objects are then applied to the style attribute of elements that are in the returned markup.

Note that curly brackets are used when referencing styles rather than the quotation marks we’d normally use in plain HTML.

Use CSS Modules

CSS Modules… what the heck happened to those, right? They have the benefit of locally scoped variables and can be used right alongside React. But what are they, again, exactly?

Quoting the repo’s documentation:

CSS Modules works by compiling individual CSS files into both CSS and data. The CSS output is normal, global CSS, which can be injected directly into the browser or concatenated together and written to a file for production use. The data is used to map the human-readable names you’ve used in the files to the globally-safe output CSS.

In simpler terms, CSS Modules allows us to use the same class name in multiple files without clashes since each class name is given a unique programmatic name. This is especially useful in larger applications. Every class name is scoped locally to the specific component in which it is being imported.

A CSS Module stylesheet is similar to a regular stylesheet, only with a different extension (e.g. styles.module.css). Here’s how they’re set up:

1. Create a file with .module.css as the extension.
2. Import that module into the React app (like we saw earlier)
3. Add a className to an element or component and reference the particular style from the imported styles.

Super simple example:

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

Use styled-components

Have you used styled-components? It’s quite popular and allows you to build custom components using actual CSS in your JavaScript. A styled-component is basically a React component with — get ready for it — styles. Some of the features include unique class names, dynamic styling and better management of the CSS as each component has its own separate styles.

Install the styled-components npm package in the command line:

npm install styled-components

Next up, import it into the React app:

import styled from 'styled-components'

Create a component and assign a styled property to it. Note the use of template literals denoted by backticks in the Wrapper object:

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

The above Wrapper component will be rendered as a div that contains those styles.

Conditional styling

One of the advantages of styled-components is that the components themselves are functional, as in you can use props within the CSS. This opens the door up to conditional statements and changing styles based on a state or prop.

Here’s a demo showing that off:

Here, we are manipulating the div’s display property on the display state. This state is controlled by a button that toggles the div’s state when clicked. This, in turn, toggles between the styles of two different states.

In inline if statements, we use a ? instead of the usual if/else syntax. The else part is after the semicolon. And remember to always call or use the state after it has been initialized. In that last demo, for example, the state should be above the Wrapper component’s styles.

Happy React styling!

That’s a wrap, folks! We looked at a handful of different ways to write styles in a React application. And it’s not like one is any better than the rest; the approach you use depends on the situation, of course. Hopefully now you’ve got a good understanding of them and know that you have a bunch of tools in your React styling arsenal.

---

Different Ways to Write CSS in React originally published on CSS-Tricks. You should get the newsletter.

The role of SEO in driving traffic from the internet cannot be neglected by any means. It has become an important asset for digital marketers to regularly generate organic leads from the internet.

That is the major reason why they always pay huge attention to using the correct practices of SEO. They cannot make any mistake while writing the meta tags, especially the titles and descriptions. Both of these things play a crucial role in defining the intent of the pages to the search engine. Their powerful wordings can not only help to grab people’s attention, but could also allow to boost site conversions regularly through the internet.

Some individuals think that just using targeted keywords in meta titles is important. This theory is half-correct because keywords alone cannot totally force people to click on the pages. They need some extra bit of value in words to get attracted to any site. This could be done by using power words in the meta titles. It is the first thing that comes to the notice whenever a person sees any site on the search engine. If the title is supported by some inspiring words, then people do feel attracted to them no matter which position they are placed in.

In this blog, we will enlist some of the popular words that could make your meta titles engaging to read. But before moving into it, let’s first understand how to improve your on-page SEO by using a creative meta title.

Importance of Meta Titles for SEO

Meta titles play a huge role in grabbing the eyeballs at the first glance. They basically draw a strong picture in the minds of the readers that are looking for some potential answers. This can lead to increased traffic on the web pages if they are properly displayed on the search engines. That is how conversions will also increase, giving SEO writers some good results from their hard work.

According to top SEO experts, writing correct and engaging meta titles is the most important part of on-page SEO. It has the capability to grab people’s attention, provided the words are chosen according to the intent. If you will not write these titles wisely, then you could face fragile daily traffic, no matter how strongly you have placed keywords in the title. It is therefore advised to write your meta titles smartly, so that they can get maximum clicks from the daily visitors.

For instance, if you are creating a meta title for an article written on informative speech topics, then make sure to write it with some sort of inspirational words. This technique will help to make your meta title more attractive, as well as better understandable for the search engine indexing bots.  

30 Power Words That Could Make Meta Titles Strong

It is important to know about those words that could make your meta titles unique among others. These words vary according to the nature of the page and the content defined in it. If you will master to pick them according to the intent of the page, then your meta titles will certainly grab a lot of attention from the visitors.

Here are some of the powerful words that you could use in the meta titles according to the given expression requirements.

Power Words for Showcasing Excitement

A lot of SEO professionals recommend to add a flare of excitement to the page titles. It offers various types of benefits, such as making the readers excited about the overall content. It is not a clickbait technique, but an organic method to drive genuine interest of people towards any page or web blog.

If you do not know what are these words and how they should be used, here are some examples given below. 

1. First Ever
2. Famous
3. Bona Fide
4. Elated
5. Final
6. Ignite
7. Iron-clad
8. Last Minute
9. Extra
10. Epic

Power Words for Showcasing Emotion

Emotional words in meta titles can be very useful in encouraging people to show interest in your content. A lot of time, this trick works well for those articles that define any type of solution to the people. These articles are centered around discussing the pain point and defining its core solution to the readers. Adding emotional words in these articles brings more value to the content, as well as the solution defined in it.

Here are some of the commonly used emotional words that could make your web copies and articles worth reading.

1. Loveable
2. Trusted
3. Honest
4. Never
5. On-demand
6. Pride
7. Sacred
8. Valor
9. No Risk
10. Fun-loving

Power Words for Showcasing Strength

It is also recommended to add those words in the meta titles that could showcase some sort of strength. These power words can add a bit of authority to your titles, encouraging people to show more interest in them. Some people think that these words could only be used in the headlines as they suit more on the upper positions. However, as per the current trends, you can also use them in the meta titles if they could be perfectly connected with the context of the content.

If you do not know which type of power words should be used to demonstrate this expression, take a look at some of the examples given below. 

1. Solid
2. Research-packed
3. Energetic
4. Fail-proof
5. High Tech
6. Huge
7. Insane
8. Proven
9. Result-oriented
10. Superb

Final Words

That takes us to the end of this article in which we have discussed different types of power words you could use in meta titles. These words are termed very important because they can allow your titles to look more catchy among others. It should be noted that these words should also be picked and used wisely according to the context of the page. You cannot just randomly place them in the meta titles, as it will totally look illogical to the readers. This should be done by knowing the right tone and content category that suits perfect with these power words, just like the examples that have been listed above. 

The post List of Power Words in Meta Titles that Boost Conversions appeared first on noupe.