Articles

The Complete Guide To Personalized Marketing

,

Personalized marketing is when you attune your marketing efforts based on customer data. This data can be anything from the first and last name to purchase intent, concerns, and history.

Personalized marketing has revolutionized the way businesses market their product and service to their audience. It brings value to people’s lives, spiking the sales graph for brands and businesses. So it’s a win-win situation for both the company and the consumer.

Even big companies do this for their campaigns. They do so because it gives them great results and ROI for their marketing initiatives. If these multinational businesses do this, it’s a good idea to incorporate this strategy and learn from a top resource on digital marketing.

This article aims to explain every nook and cranny of personalized marketing. By the end of this 5-minute read, you will know the impact of personalized marketing on our lives. And how you can integrate this into your marketing strategy to benefit your business.

What Is Personalized Marketing?

Have you ever encountered a business that knows what you’re going through? Or did you see an ad online that you closely relate to? Chances are, you were one of the target markets of those marketing materials. And if you could associate yourself with the ad, their marketing strategy worked.

That is what personalized marketing does to your audience, market, or particular demographic. This style of advertising leverages personalization in your marketing materials. The details of your marketing content are tailored to a specific audience and address the issues or real-time problems of a particular segment in your market.

Personalized marketing has become popular because more people demand it from businesses. Once the people have experienced what it felt like, they want to feel more of it.

To objectively see the demand for personalization, here are some statistics to back it up.

Accenture reported that 91% of consumers are likelier to shop with businesses that offer them relevant content. This shows that the right product recommendations can increase the chances of shopping with you.

Salesforce mentioned that 66% of consumers expect companies to understand their individual needs. This statement proves that a generalized way of marketing isn’t as effective as before. The consumer mindset has already developed, and they demand more personalization from businesses.

A striking piece of data from Statista showed that 90% of consumers in the US find the idea of personalization appealing. If that figure is accurate, almost all businesses should start incorporating this into their strategies. There’s no reason for them not to try this out.

Given the high positive demand for personalized marketing, it’s no secret why more and more businesses are doing this. However, not every company out there is doing this right. A wrong way of doing this can bring a loss of clients and a negative ROI.

To help you go on the right track of using personalization in your marketing, read up on the next section of this article.

Know These 6 Tips To Correctly Do Personalized Marketing

You’d agree that knowing your customer’s first and last name is essential. But with the dynamically changing strategies, personalized marketing is going beyond that. It’s actually about understanding what your targeted consumers need, merging with a way to convey the message that your business is the solution.

To help you achieve this, take note of the things below:

1. Leverage Your Customer Data

The foundation of personalized marketing is laid on customer data. The best marketing professionals and strategists emphasize gathering relevant data if you want to scale. Excellent digital marketing courses will teach you that customer data will help you build a solid foundation for your content and campaigns.

Consumer behavior has always been the most important detail for target marketing. With every click, it has become easier to gather data about individual customers, their interests, hobbies, purchase history, buying behavior, and more.

You’ll be able to get this information if you’ve practiced data management and collecting customer data throughout the years of your operation. However, it’s not too late to begin if you haven’t started with this yet. There is a lot of marketing automation software that aids marketing teams in doing this. For example, many businesses use lead scoring software to gain insight into their clients’ needs and categorize them appropriately.

For your personalization efforts, you can use questionnaires, surveys, and feedback forms to capture personal data on the internet. A customer will happily fill out a survey form if a reward in return entices him. This reward can be in any form– a voucher, a first buy discount, free shipping, or more.

This initiative will help you get more data in a shorter time frame.

2. Understand Your Customer’s Needs

Hoarding data will be a complete waste of marketing efforts, capital, and efficiency if you do not extract consumer behavior from it. When you have access to a rich set of data, you have the privilege to understand your customers’ trending needs deeply. After gaining insights from the data, create a marketing strategy based on those findings to target your audience.

Doing this doesn’t just apply to B2C; it also works for B2B companies, which is why the demand for custom software development, tailored services, personalized packages, and B2B data providers have been on the rise in these recent years.

It is a two-way road. While you are on the lookout for your target market, at the same time, the customers expect businesses to know what they need. The market you’re currently serving expects you to know what products or services are fit for them.

So this is where it gets crucial: you have to dig deeper into your niche and find the specs of your audience’s needs. Having a general idea about the needs of your target audience and personalized marketing usually don’t go harmoniously.

Planning a better-personalized marketing strategy will not be a piece of cake but will be much more rewarding for every aspect of your business. May it be sales, return on investments, customer relationships, or personalized marketing campaigns.

3. Personalize Every Stage Of The Customer Journey

The first rule of business is convincing the customer that you are their best friend. Now that you know what they want, you pledge to provide them with whatever best you can. Limiting personalization to marketing is not the solution. You have to be vigilant in meeting these individual requirements at every stage. And remember that consistency is the name of the game. That is how you bring your business into the running.

You can integrate CRM automation, email marketing tools and deploy other content marketing strategies to help make this process a lot simpler. Personalized live chat and chatbots, such as those offered by ThriveDesk, allow businesses to personalize their offerings and build their brand reputation.

As a customer, my requirement would be reading content, browsing, and experiencing products that would hit home. A personalized experience is what every consumer demands. And this is what makes them want to go back and do business with you again.

By creating helpful and relevant content, recommending the right products to them, and giving out convenient payment options, you are setting your business apart from the rest. Doing this allows you to have personalized every touchpoint that your customers do with your business.

4. Present In An Engaging Way

Consider customer engagement as absolutely necessary. Having the best data set and knowing what your customers want is not enough. In the competitive space of business and marketing, everyone is trying to get the attention of one another. And this is what you are supposed to do. This helps in building consumer-brand relations.

When a consumer engages, meaningful things happen. Engaging content pushes the consumer through the funnel and hence promotes conversions. Your content should be creative and eye-catching.

Engaging content blended with personalization boosts the brand experience. Increased loyalty, trust-building, and improved customer experience enhance the conversion and sales speed.

A great way to use personalization in an engaging manner that most businesses overlook would be through exit-intent popups.

5. Be Where Your Customers Are

This is an element that some businesses miss out on. They have created excellent social media marketing content but only distributed it on the wrong channel. For personalized marketing to be effective, it needs to be seen by people.

Are you questioning your marketing techniques because all you see is stagnancy? You have set up an engaging online store on Shopify or Wix, collected all the relevant data, your content is engaging enough, and your marketing strategy is top-notch. But you are still unable to reach your clientele.

You start wondering what you are missing out on. Your content and your strategies will not be prolific if you are on the wrong channel. Remember: the message of your content has to reach the right people for it to be effective.

Should you be on social media? If so, which one? Do you get more traction with email campaigns? Or do you have more engagements on forums?

Find out where your market is, then spend your focus there. Now the next step is how to know where they spend most of their time?

This is where we go back in the loop. And hence we again emphasize that data collection is the foundation of any great marketing strategy.

6. Improve Marketing Content

Don’t rest on your laurels when you’ve gotten everything down to a tee and have attained your desired marketing analytics behind your personalized marketing content. Always think of ways how you can improve.

Evolving at every step will keep you in the running. Don’t be misguided into thinking that your work is done if you feel like you have reached the pinnacle. Keep looking for ways to get better. Set bigger goals and status for your business.

Always go back to the drawing board and brainstorm with your team on how you can change and strive with the dynamically changing world and mindsets. In the end, all you want is to build better relationships with your customers, new and existing.

For enhanced productivity, your marketing team should always look for new strategies. This is how fresh and great marketing ideas are made.

See How You Can Benefit From Personalized Marketing

Irrelevant information can waste energy and time for both customers and the business. Personalized marketing hits the bull’s eye 99% of the time. It brings immeasurable value to the company as well as the customer.

Here are some of the top benefits of personalized marketing:

1. Better Engagement

The first target personalized marketing aims at is grabbing an individual’s attention. And this results in better engagement eventually. If you are presenting your customer with something that wows them, needless to say, it will grab their attention.

This will help bridge the gap between your customer and your brand. Identifying customers’ needs and then giving them what they want will help improve customer interaction with your brand.

It can even be enough for them to follow your call to action. The next thing you know, they will be checking your website, signing up for a list, or even purchasing a product right then and there.

2. Higher Conversions

Are you there for your customer at the right time and place? One-on-one marketing provides easy solutions to customers because you hit them with just what they are looking for at the right time.

When potential customers realize that you understand what they’re going through and provide the solution, most won’t hesitate to try your business out.

Personalization isn’t just focused on content. It can also be integrated into your processes. This results in aiding the increase of higher conversion rates.

3. Improved Customer Experience

Offering personalization will significantly improve the user experience. Once you provide the products, services, and content that meet their needs, their opinion of your business automatically improves.

Considering the statistics about personalized experiences, it is evident that consumers demand personalization strategies from companies. And if you offer such an experience, you increase the chance of making them do more business with you. Personalization helps businesses in reducing cart abandonment rates, better customer journey, increased customer satisfaction, and many more.

4. Customer Retention

Retaining persisting customers is equally important to your business as bringing new ones. Most businesses face low customer retention. It’s also a factor that some companies overlook. You must understand that it’s not all about converting prospects into paying customers. Your focus should also be on retaining those customers to make them loyal advocates of your brand.

One of the major benefits of consistent personalization is an improved customer retention rate. Consumers tend to stay with a business that understands their needs and provides solutions to their problems.

Once you can transfer a customer to a loyal advocate, you can also receive a ton of benefits. These are people that are going to defend your brand from critics. These are the same people who will give you free marketing via word of mouth and positive reviews.

5. Better Customer Relationships

Personalized experience leads to customer retention, eventually building better relationships with your nurtured customers. These entities are connected in a loop.

Customer relationships are an aspect of business that significantly helps with scalability and higher revenue. So connecting with your customers and building a relationship with them is as important as the product you are selling. This is why strengthening customer relationships should be a top priority for businesses.

Personalization makes you an expert on your target market trends. You get to know your audience deeper, which helps you build a foundation for creating a great customer relationship. And this requires marketing and customer experience teams to work together in a symphony.

For this, you can use team collaboration software which aids in the optimization of content and your approach toward the market. You’ll have a better strategy in getting their attention, providing what they want, and recommending things they’ll be interested in.

All of these things help in building customer rapport. When a customer feels that you treat them as more than just a paying customer, their customer loyalty goes to your business.

Best Examples Personalization Marketing

To inspire you to integrate this marketing strategy into your operations, below are different personalization marketing campaigns done exceptionally by various businesses. Grab inspiration, ideas, and motivation from these examples.

1. Coca-Cola

We all know the most basic form of personalization is addressing your customers’ names, but Coca-Cola took this simple idea into a massive global campaign. Their “Share a Coke” campaign started in 2011, wherein they printed different popular names on their Coke bottles and cans.

It seemed like a regular campaign at first, but it started getting traction as more customers wanted to get the name of their family, friends, and themselves. Coca-Cola said the campaign’s purpose was “to create a more personal relationship with consumers and inspire shared moments of happiness.”

The soft drinks giant used personalization and tied such a strategy with its mission: to bring memories and happiness to its consumers. You, too, can do the same – combine your mission and personalization strategy to create a unique campaign.

2. Spotify

Spotify leverages user data in its marketing strategy. They have several campaigns that make users want to use their application more often because it gives out a more tailored experience.

Other than their year-end campaign( #spotifywrapped), where they show the most played songs and podcasts their users listen to (which was a viral hit), they now also have an #OnlyYou campaign that shows your unique listening taste partnered with a musical astrology reading.

3. Nike

Nike has consistently been recognized for authentic, personalized, and heartfelt ad campaigns. This personalization always makes them capture an audience who can relate and those who start connecting to the brand. So Nike isn’t new to personalization. Their aim is robust community engagement.

Their highly inspirational campaigns with real-life heroes induce inspiration in their audience. Nike is great at converting people because of its excellent storytelling ability while adding personalization to the mix.

Nike’s just launched a new app that offers personalized content and rewards for committed fans. They tackle challenges and issues head-on, but they always make their marketing messages relatable to their audience. That is why they “just do it.”

Conclusion

Personalized marketing is the secret sauce to thriving businesses in the world today. However, incorporating this marketing strategy and finding success is not as simple as you might think. You will face challenges, but with enough perseverance and brainstorming, you can surpass them and successfully create a great campaign.

Remember, this marketing approach can be a hit or a miss. The first step to making it a success is relevant data collection followed by judicious implementation. This isn’t an overnight activity that you can do. It requires months of diligence in the right direction with the proper guidance. And you can gain valuable insights into this guidance via the content marketing strategies outlined in this article. But remember, once you start rolling, there is no looking back.

Source

The post The Complete Guide To Personalized Marketing first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

How to Bootstrap a Web Design Business

,

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.

Source de l’article sur Webdesignerdepot

/par

3 Essential Design Trends, June 2022

,

Are you bored with some of your current design projects? This month’s collection of website design trends can help break you out of that rut with some fun and funky alternatives.

And all of these options are anything but boring. From visual display to technique, these trends present a different set of challenges.

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

1. Layers on Layers

These website designs have so many layers of information that you almost don’t know where to look or where the design elements start and stop.

This can be a complex technique to make work because of the number of elements competing for the same attention in the design.

What you are likely to see with this design tend includes an image or video background with some motion but not anything that truly demands attention. Then add on a few still images in smaller frames throughout the design. Layer on text as well for a three-deep effect.

If you interact with these designs, you’ll find that they are not flat either. They all include animated elements, hover states, and interactions that help direct you through the layers of what can be a somewhat complex design.

Western National Parks Association uses a background image, middle images with animations, and multiple text layers (some on the pictures and some on the background). There’s also scroll animation to help build the design. A lot is going on, but it does not feel too busy.

WIP Architects is another design with layers that interact with each other and include motion. With a lot of scroll animation and layers that go in front of and behind other elements, engagement helps this site work.

The Shipwreck Survey uses the same basic layer outline with a little more overlap between elements and less overall animation. The primary animated effect on the homepage is the scroll bar.

 

 

2. Directed Click Actions

This interesting website design trend can be incredibly useful or a wasted element – directed click actions. These are buttons, icons, and animations that tell you to click somewhere in the design to move to the next stage of interaction.

The direct approach ensures that users see and have the best possible chance of doing what the design is intended for. On the other hand, if you need this much instruction, is the design too complicated? Or is there a middle ground where this trend looks great and is usable?

In each of the examples below, these directed click actions are a bit different.

HUG Co has a big circle to click in the bottom third of the screen. It’s almost designed like a bullseye, and you can’t miss it. The thing that is interesting here is that most of the video falls below the scroll. The click action also has two emojis to denote action – a smiling face or pointer when you are ready to click. (The click extends the video to full screen.)

ThinkOvery also uses a similar circular click icon. It also takes you to the next screen in a single movement so that you can continue to explore the design.

Living with OCD has a different approach with scroll and back-to-top icons paired in the bottom right corner. The scroll option includes words to help create direction and instruction. It consists of a small animation and an interactive hover state when you get close to the interactive element. The interesting thing here is that it is not actually a button, and you use a traditional scroll to interact.

 

 

3. Word Breaks

If you are a stickler for readability, this design trend might make you cringe.

In each of these designs, words are broken across lines – some with and some without hyphens. For the most part, there’s not much confusion about what the words are, but it does make you pause and think during the page experience.

Why would this be a design trend?

It’s a combination of using large typography, long words, and figuring out a solution to create a common experience between large and small screens. Many of these words would not fit on mobile screens, for example, with the same weight, scale, and impact as the desktop counterparts.

Hence, the word break solution. It creates a consistent user experience across devices.

This technique should be used only if you think your audience is savvy enough to understand what you are trying to communicate with the word break. It can be a tricky proposition!

Plantarium breaks at “plant” with a word that’s made up. But with the imagery and supporting terms, you still know immediately what the design is about.

Michelle Beatty takes a common word and breaks it. Because “photog” and “rapher” are the only letters on the screen, it’s pretty easy to figure out. What’s interesting is that the word break is not on the syllable, but the letters do stack nicely with this break visually.

Wreel Collective breaks a word with a hyphen in giant letters – something we rarely see in website design. Hyphens are not often used in this medium. Because of this, it gets your attention and makes you think about the words and the design.

 

 

Conclusion

There are a lot of rule-breaking trends in this month’s collection. They are interesting, fun, and require a certain level of risk to execute.

Could you see yourself (or your clients) opting for a design that features one of these trends? Time will tell if these visual compositions grow in popularity or begin to fade fast.

Source

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

Source de l’article sur Webdesignerdepot

/par

A Brief History of Responsive Web Design

,

Websites haven’t always been as adaptable as they are today. For modern designers, “responsivity” is one of the most significant defining factors of a good design. After all, we’re now catering to a host of users who frequently jump between mobile and desktop devices with varying screen sizes. 

However, the shift to responsive design didn’t happen overnight. For years, we’ve been tweaking the concept of “responsive web design” to eventually reach the stage we’re at today. 

Today, we’re going to take a closer look at the history of responsive web design.

Where Did Web Design Begin?

When the first websites were initially created, no one was worried about responsivity across a range of screens. All sites were designed to fit the same templates, and developers didn’t spend a lot of time on concepts like design, layout, and typography.  

Even when the wider adoption of CSS technology began, most developers didn’t have to worry much about adapting content to different screen sizes. However, they still found a few ways to work with different monitor and browser sizes.

Liquid Layouts

The main two layout options available to developers in the early days were fixed-width, or liquid layout. 

With fixed-width layouts, the design was more likely to break if your monitor wasn’t the exact same resolution as the one the site was designed on. You can see an example here. 

Alternatively, liquid layouts, coined by Glenn Davis, were considered one of the first revolutionary examples of responsive web design. 

Liquid layouts could adapt to different monitor resolutions and browser sizes. However, content could also overflow, and text would frequently break on smaller screens. 

Resolution-Dependent Layouts

In 2004, a blog post by Cameron Adams introduced a new method of using JavaScript to swap out stylesheets based on a browser window size. This technique became known as “resolution-dependent layouts”. Even though they required more work from developers, resolution-dependent layouts allowed for more fine-grained control over the site’s design. 

The resolution-dependent layout basically functioned as an early version of CSS breakpoints, before they were a thing. The downside was developers had to create different stylesheets for each target resolution and ensure JavaScript worked across all browsers.

With so many browsers to consider at the time, jQuery became increasingly popular as a way to abstract the differences between browser options away.

The Rise of Mobile Subdomains

The introduction of concepts like resolution-dependent designs was happening at about the same time when many mobile devices were becoming more internet-enabled. Companies were creating browsers for their smartphones, and developers suddenly needed to account for these too.

Though mobile subdomains aimed to offer users the exact same functions they’d get from a desktop site on a smartphone, they were entirely separate applications. 

Having a mobile subdomain, though complex, did have some benefits, such as allowing developers to specifically target SEO to mobile devices, and drive more traffic to mobile site variations. However, at the same time, developers then needed to manage two variations of the same website.

Back at the time when Apple had only just introduced its first iPad, countless web designers were still reliant on this old-fashioned and clunky strategy for enabling access to a website on every device. In the late 2000s, developers were often reliant on a number of tricks to make mobile sites more accessible. For instance, even simple layouts used the max-width: 100% trick for flexible images.

Fortunately, everything began to change when Ethan Marcotte coined the term “Responsive Web Design” on A List Apart. This article drew attention to John Allsopp’s exploration of web design architectural principles, and paved the way for all-in-one websites, capable of performing just as well on any device. 

A New Age of Responsive Web Design

Marcotte’s article introduced three crucial components developers would need to consider when creating a responsive website: fluid grids, media queries, and flexible images. 

Fluid Grids

The concept of fluid grids introduced the idea that websites should be able to adopt a variety of flexible columns that grow or shrink depending on the current size of the screen. 

On mobile devices, this meant introducing one or two flexible content columns, while desktop devices could usually show more columns (due to greater space). 

Flexible Images

Flexible images introduced the idea that, like content, images should be able to grow or shrink alongside the fluid grid they’re located in. As mentioned above, previously, developers used something called the “max-width” trick to enable this. 

If you were holding an image in a container, then it could easily overflow, particularly if the container was responsive. However, if you set the “max-width” to 100%, the image just resizes with its parent container. 

Media Queries

The idea of “media queries” referred to the CSS media queries, introduced in 2010 but not widely adopted until officially released as a W3 recommendation 2 years later. Media queries are essentially CSS rules triggered based on options like media type (print, screen, etc), and media features (height, width, etc). 

Though they were simpler at the time, these queries allowed developers to essentially implement a simple kind of breakpoint – the kind of tools used in responsive design today.  Breakpoints refer to when websites change their layout or style based on the browser window or device width.

Viewport Meta tags need to be used in most cases to ensure media queries work in the way today’s developers expect. 

The Rise of Mobile-First Design

Since Marcotte’s introduction of Responsive Web Design, developers have been working on new ways to implement the idea as effectively as possible. Most developers now split into two categories, based on whether they consider the needs of the desktop device user first, or the needs of the mobile device user. The trend is increasingly accelerating towards the latter. 

When designing a website from scratch in an age of mobile-first browsing, most developers believe that mobile-first is the best option. Mobile designs are often much simpler, and more minimalist, which matches a lot of the trends of current web design.

Taking the mobile first route means assessing the needs of the website from a mobile perspective first. You’d write your styles normally, using breakpoints once you start creating desktop and tablet layouts. Alternatively, if you took the desktop-first approach, you would need to constantly adapt it to smaller devices with your breakpoint choices.

Exploring the Future of Responsive Web Design

Responsive web design still isn’t perfect. There are countless sites out there that still fail to deliver the same incredible experience across all devices. What’s more, new challenges continue to emerge all the time, like figuring out how to design for new devices like AR headsets and smartwatches. 

However, it’s fair to say we’ve come a long way since the early days of web design. 

 

Featured image via Pexels.

Source

The post A Brief History of Responsive Web Design first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

The Definitive Guide to Building a Data Mesh With Event Streams

,

Data mesh. This oft-talked-about architecture has no shortage of blog posts, conference talks, podcasts, and discussions. One thing that you may have found lacking is a concrete guide on precisely how to get started building your own data mesh implementation. We have you covered. In this blog post, we’ll show you how to build a data mesh using event streams, highlighting our design decisions, and the key benefits and challenges you’ll need to consider along the way. In fact, we’ll go one better: we’ve built a data mesh prototype for you to check out on your own to see what this would look like in action, or fork to bootstrap a data mesh for your own organization. 

Data mesh is technology agnostic so there are a few different ways you can go about building one. The canonical approach is to build the mesh using event streaming technology that provides a secure, governed, real-time mechanism for moving data between different points in the mesh. 

Source de l’article sur DZONE

/par

Designers Should Code: Build an App From Scratch

,

A breakdown of a simple app, from UI design to deployment, that shows off why coding is a magic tool for designers.

Figma, Adobe XD, Photoshop, Wacom Tablet, sketchbook… all tools for interfaces and web designers, yes? Take 2 minutes, and try to remember why you want to become a designer and why you enjoy designing stuff.

Chances are it’s because you like to create; you’re a creative person. Maybe you started with artistic experiences as a child, then turned that creative energy into problem-solving while continuing to express it visually: You became a designer, a creative problem solver.

Today, I’ll try to show you how coding is an underrated tool to express your creative problem-solving mindset by building a real SVG generator from scratch. So let’s get into it!

Step 1: Don’t get an idea; solve a problem

We didn’t go into deep business considerations here, but seeing problems you face and deciding to solve them yourself is a great way to start.

During client work, I needed some SVG waves for illustrations. So I looked for a wave generator: There were a ton of wavy colorful wave generators with parametric inputs but no simple, perfect sine waves generator. I decided to draw it on my math tool GeoGebra and then export it to SVG.

Okay, but not fast. And we like to get our jobs done quickly. But wait… Why don’t we create a perfect sine waves generator? Without equations & boring math software to open, just a curve and an export button. You got it, now let’s design it.

Quick tips: If you are looking for a problem, look for memes in your field. They always show a deep, painful, well-known problem.

Step 2: Design the solution simple as possible

Two main rules: First rule, think about who will use it; the second rule, predict what they expect from how it works. So who? Front-end developers. What are they waiting for? A curve that can be edited with direct feedback and an export button.

Wireframe design

High-Fi design

A quick tip: You can grab the Figma design of the app for more technical tips on the design.

Step 3: Build it for real

As a designer, stopping at step two is perfectly fine. But imagine if you could build what you design! You already know you can create everything you want.

You can see coding as a way to translate your UI that will surely end with a .com application that is usable by everyone. This is why “best languages” don’t matter; coding is just a tool to express your creativity and build stuff for others. And as a designer, a creative person, this might sound…interesting.

UI to functionnal app

UI to functional app

Every web app interface can be translated from UI design to code with HTML/CSS/JS. There is how we can see the role of each of those 3 “languages”:

HTML: I want a button.

CSS: I want my button to look rounded.

JS: I want something to happen when I click on my button.

To build our app, I’ll use Svelte. Svelte is a JavaScript compiler that allows us to use all those three “languages” in one place. So, let’s see how code can translate our UI to functional things.

HTML button code

“Hey web browser, I want a button named “exportButton” and everything in a function named “downloadSVGpath” to be carried out when someone clicks on the button :) Thanks”

CSS style button code

“Hey web browser, I want you to apply these style rules to my basic HTML button: I want a beautiful rounded corner at 16px, a mouse pointer when we hover it, I don’t want any borders, but I want a cool color gradient as a background color. Then, I want the font inside the button to have its color set to #fcfcfc and use the Inter typeface (bold, please). Like my Figma design, I also want to center stuff in the button and add padding. Oh, and add a subtle shadow :) Thanks.”

Drawing SVG curve function

“Hey, web browser, each time our slider moves, I want to run this function: I want you to draw a curve inside a frame that I have defined inside my HTML code. I also want my curve stroke to look rounded at each cap and have a color and width I’ve defined inside variables. You will take the sine function parameters from the stored values of the sliders. Finally, while your x variable hasn’t reached the total width in the x-axis of our frame, you will solve the y-axis point position of the sine equation and draw the curve :) Thanks.”

Quick tips: You can grab the source code files of the app to explore them.

Summary

  • Coding is just a tool that allows us to translate our very visual metaphors into something that everybody can use. How cool is that?!
  • Coding helps us to envision our design goals and forces us to see beyond the visual range: how is my button will be supposed to work? How does it look when hovering? How my popup modal can be designed for mobile devices?
  • Coding allows us to create the weird idea we designed “just for fun” instead of pushing the design case study into our portfolio under the “personal project” tag.
  • Coding shows us how much work is required to achieve what we designed. So we can better understand our design clients’ needs, challenges, and resource management.
  • Coding is flexible. You can replicate the Netflix website pixel perfect with pure HTML/CSS, the Vue Framework, or any other Web framework.

Source

The post Designers Should Code: Build an App From Scratch first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

The 5 Healthcare AI Trends Technologists Need to Know

,

Healthcare has been at the epicenter of everything we do for two years. While the pandemic has been a significant driver of the conversation, healthcare technology—artificial intelligence (AI) specifically—has been experiencing explosive growth. One only needs to look at the funding landscape: more than 40 startups have raised at least $20 million in funding specifically to build AI solutions for healthcare applications.

But what’s driving this growth? The venture capital trail alone won’t help us understand the trends contributing to AI adoption in healthcare. But the “2022 AI in Healthcare Survey” will. For the second year, Gradient Flow and John Snow Labs asked 300 global respondents what they’re experiencing in their AI programs—from the individuals using them to the challenges and the criteria used to build solutions and validate models. These are the top five trends that emerged from the research. 

Source de l’article sur DZONE

/par

Lessons to Learn from Etsy’s DevOps Strategy

,

Every organization adopting DevOps has stories to tell to the world. Some of them turned out to be success stories, while others are more like lessons to learn. While it’s true that Etsy is one of such organizations that benefited a lot from their DevOps adoption, they also learned a few lessons from their mistakes during their journey. Today, we will be talking in brief about those lessons in detail. But first, let’s try to understand why Etsy first became interested in DevOps.

Why Did Etsy Adopt DevOps?

Back in 2005, Etsy’s engineering teams were siloed into developers, operations teams, and database admins. Although the team was relatively small — close to 35 employees — they faced many team collaboration challenges. This barrier was hindering Etsy’s progress as an organization. 

Source de l’article sur DZONE

/par

SAP accompagne la transformation du groupe Kering avec des solutions technologiques innovantes

, ,

Le groupe Kering renouvelle sa confiance en SAP pour ses activités finance, retail et supply chain, avec la mise en place de solutions de nouvelle génération ayant comme cœur l’ERP S/4HANA for Fashion.

Kering est un groupe mondial de luxe qui regroupe un ensemble de Maisons emblématiques dans le monde de la couture et de la maroquinerie, telles que Gucci, Saint Laurent, Bottega Veneta, Balenciaga, Alexander McQueen et Brioni. Kering est également présent dans le secteur de la joaillerie avec les marques Boucheron, Pomellato, DoDo et Qeelin. Enfin, le groupe a créé en 2015 Kering Eyewear, une entité dédiée à la lunetterie haut de gamme et sport. Kering comptait en 2021   plus de 42.000 collaborateurs pour un chiffre d’affaires annuel de 17,6 milliards d’euros.

Depuis quelques années, le groupe est engagé dans un ambitieux projet de transformation digitale, tant au niveau corporate que de ses marques.

Cette transformation en matière d’innovations et de technologies passe notamment par l’harmonisation des fonctions corporate et par le déploiement de services partagés pour les marques afin qu’elles puissent rester dédiées à leur cœur de métier, la création. Dans le même temps, cela implique une simplification et une rationalisation des systèmes d’information (SI) afin d’atteindre l’excellence opérationnelle et de contrôler les coûts.

L’IT joue un rôle clé dans cette transformation de l’organisation. La DSI de Kering a en effet pour vocation de proposer des solutions communes à l’ensemble des entités du groupe. « Nous nous focalisons actuellement sur trois fonctions clés, explique Nicolas Gauthier, Group Chief Information Officer chez Kering : le retail, afin de proposer le bon produit, au bon moment, la supply chain, avec comme objectif une livraison toujours plus rapide des produits et enfin la finance, afin de soutenir les équipes. »

Afin d‘accompagner cette transformation, Kering a choisi un ensemble de solutions SAP innovantes. « Nous voulons mettre en place une plate-forme permettant de se doter de processus plus efficaces, d’effectuer des échanges de données en temps réel et d’harmoniser nos modèles opératoires. Notre système SAP est probablement l’un des plus importants du marché, avec une instance couvrant trois domaines, trois régions et soixante pays. Il est interfacé avec tous nos systèmes, magasins et entrepôts. »

Aller vite dans la construction de la nouvelle plate-forme SAP

Kering a ainsi sélectionné le meilleur des solutions SAP pour répondre aux besoins de ses métiers. Le groupe a en ligne de mire l’adoption de l’ERP SAP S/ 4HANA Retail et Fashion, accompagné d’une interface utilisateur ergonomique s’appuyant sur la technologie SAP Fiori. À cet effet, il a renouvelé son partenariat stratégique avec SAP. « Nous devons aller vite, afin de respecter le rythme de transformation fixé par le groupe », explique Nicolas Gauthier.

Mais l’organisation doit également faire face à d’autres challenges : savoir insuffler ses principes et bonnes pratiques dans le nouveau système d’information (SI) SAP, être capable de déployer ces nouvelles solutions sans impacter les opérations courantes tout en créant un système respectueux de l’environnement. « Du point de vue technique, toutes nos solutions sont conçues pour avoir un impact minimal sur l’environnement. Nous publions d’ailleurs un rapport incluant une évaluation de l’impact environnemental de nos activités. Du point de vue métier, nous essayons de mettre en place dans notre ERP SAP des processus capables de réduire l’empreinte carbone du groupe Kering. »

Kering a dans un premier temps travaillé sur les fonctions finance. « C’est le cœur du SI, sur lequel se connectent le retail et la supply chain », analyse Nicolas Gauthier. Le core model finance a été déployé avec succès dans les principaux pays du groupe (dont la zone EMEA), et ce pour toutes les marques.

 

 

Savoir rester à l’écoute

Le succès du projet repose sur une recette éprouvée : « Nous restons très proches des utilisateurs. Nous écoutons tous nos interlocuteurs, afin de délivrer la solution attendue. Nous utilisons également des méthodes de développement agile et nous construisons nos solutions étape par étape, afin d’éviter tout effet tunnel. Enfin, nous nous challengeons en continu, en évaluant le taux d’adoption et l’utilisation des solutions que nous proposons aux métiers. »

SAP est un partenaire qui accompagne et propose les innovations qui donnent corps au projet de transformation de Kering. « SAP a un rôle à jouer pour nous aider à implémenter notre vision, non seulement, sur la partie technique, mais en apportant également des idées nouvelles sur la manière d’adresser certaines problématiques métiers. Nous avons noué une relation très proche, nos experts parlant avec leurs experts, nos managers avec leurs managers. La qualité du service premium Max Attention est un élément déterminant du succès de la transformation de Kering qui nous permet de bénéficier de l’entièreté du potentiel et de la valeur des solutions SAP ».

 

 

 

 

The post SAP accompagne la transformation du groupe Kering avec des solutions technologiques innovantes appeared first on SAP France News.

Source de l’article sur sap.com

/par

How to Scale Your Design Process and Improve Handoff

,

It’s something every design team dreams about – a better design process and handoff procedure. Your design team is not alone if you are looking for a better solution.

Imagine what your workflow would look like if you could forgo the struggles of image-based technology, design and handoff with accurate components that have interactive features. Projects in the design phase will look more like final products and, most importantly, interact like final products. 

Let’s imagine a new design process together.

Challenges of an Image-Based Design Process

Here’s what we all know – image-based design tools provide pictures of components in the visual form but lack the interactivity and conditions that exist in the end-product. There’s not a high level of functional fidelity there, and it can cause confusion among design teams and rework.

These tools require you to redraw the fundamental components and design with boxes and rectangles, which takes too much time and can create a disconnect between the design and development teams. 

Further, you don’t fully maximize the potential of a design system because of inconsistencies between code-powered systems that developers use and these image-based systems for designers. There’s an innate gap between maintaining the environments and creating consistency in components. 

The final and maybe most difficult challenge with an image-based design process is in usability testing. You just can’t test an image the way you can working components. If the prototype is not interactive enough, you lose valuable feedback in the testing process. Functional fidelity is a must-have design and development tool in 2022. 

Iress, market-leading financial software, had many of these same problems in its design system process. You can probably relate to its story, which includes a designer and engineer who aren’t entirely on the same page, hit the deadline and have to deliver, and then get customer feedback. The result was a lot of extra headaches and work. 

But there is a better way: Import all user interface components into a code-powered design system in sync with a design tool so that your team can work in harmony to build, scale, and handoff projects with ease. 

Scale Design With Accurate Components

Here’s what most design and development teams want en route to building products: Accurate components with built-in interactivity, states, and conditions. No redrawing boxes and rectangles; no trying to figure out what states and interaction should be.

And if you can do it with ten times the speed and agility? Now you’re really in business. 

“It used to take us two to three months just to do the design. Now, with UXPin Merge, teams can design, test, and deliver products in the same timeframe,” said Erica Rider, Senior Manager for UX at PayPal. “Faster time to market is one of the most significant changes we’ve experienced using Merge.”

The time and workflow savings come from the ability to maintain only one environment as a product team. Rather than image-based tools, a code-powered design system that will push updates to components as the design evolves is the modern way to work. This workflow can also eliminate duplicate documentation so that your team has a single source of truth for whole product teams. 

Now you can be more agile in the design process and scale. And as Rider hinted at, there is a solution already available in UXPin Merge. 

Scalability with accurate design components has other benefits as well. 

Teams can onboard people faster because the design system is in the design tool. There’s less searching for answers with drag and drop-ready building blocks. New team members will find more success and be more valuable to the team quicker due to fewer inconsistencies and errors. 

Testing also gets a boost as you scale with a single source of truth. You can actually create better usability tests with a high-fidelity, functional version of the prototype, allowing users to leave more valuable and detailed feedback that can improve your product in the early stages. 

Better Handoffs Start Here

As you imagine a better design process, take it one step further. Better handoffs are a goal for most teams. 

An interactive component-based design tool can eliminate the need for multiple iterations of the same meeting to explain how a prototype works. Everyone can see and interact with it for themselves with accurate, true components that ensure the prototype works the same as the product. 

Designers will feel more like their vision is making it into the final product, and developers have a better idea of how to work. Everyone has the exact same components written in code. Thanks to the single source of truth, devs can speed up as they build the product because they start with components that include production-ready code.

A typical design to developer handoff might have multiple steps: Create vector design elements, create a model for interactions, and then send the prototype with documentation. Not to mention the meetings that are required to make sure everyone is on the same page.

In a model with interactive component elements, the developer handoff is fast and easy; they create a prototype with true components and all the built-in properties. The developer copies the JSX code and pastes it into his tool to build the final product. All the component properties and their coded interactions already exist in the source code. This is possible because the source of truth is the code itself, the source code.

Quick Tool Solution and Technical Use

This solution to this common challenge is not somewhere in the future; it’s already here.

UXPin, a code-based design tool, has Merge technology, which allows you to bring all interactive components into UXPin. Then you can use your own, or the open-source library with the ready-made building blocks to get products ready faster.

Here are just a few of the things you can do with Merge by UXPin:

  • Integrate your developer’s storybook to use it as a single source of truth (works for all frameworks)
  • Import design system components from a dev’s Git repository, such as GitHub, Bitbucket, GitLab, or others (works with React)
  • Work with the built-in MUI library
  • Add the npm component package to UXPin on your own (no developer required)
  • Design with the confidence that your work can be ideally reflected by developers
  • Create and share a library of interactive components

Summary 

Say bye-bye to redrawing rectangles – build more accurate prototypes easier and end-products faster with Merge by UXPin.

Now is the time to solve one of your biggest design challenges while upgrading and scaling the design process and improving handoffs. 

Merge by UXPin is user-friendly and made for scalable projects of almost any size. The line between design and development blurs with quicker product release and a fully-interactive solution. Request access today.

 

[– This is a sponsored post on behalf of UXPin –]

Source

The post How to Scale Your Design Process and Improve Handoff first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par