Articles

5 Creative Management Trends to Watch in 2022

,

Yesterday’s creativity won’t keep pace with tomorrow’s requirements; businesses need speed and agility without sacrificing creative quality.

“The creativity that was needed in the past is not the creativity that is needed today,” according to Matthew Rayback, a creative director at Adobe. He’s not talking about the function of creativity but rather about the process of creative management in a marketing context. 

What is needed today? Speed and agility without sacrificing quality. 

Why? Because the pace of change has accelerated. As Rex Salisbury, a deal partner for the venture firm a16z noted early in the pandemic, “Businesses of all kinds are experiencing two years’ worth of digitization compressed into months.”

This accelerated digital transformation has put pressure on marketing teams to turn campaigns around faster. In turn, that places pressure on creative teams to generate the requisite creative for those campaigns. Leaders need to sharpen their awareness of the unfolding creative management trends to keep pace. To that end, below are five such trends to watch in 2022. 

1. In-House Creative Teams Continue to Grow

Companies have been building in-house creative teams for the better part of a decade. A 2018 study by Forrester Research and the In-House Agency Forum (IHAF) found the number of in-house teams has grown 22% in the last ten years or so. As The Wall Street Journal reported, more than half of advertisers (64%) have shifted their creative organizations to an in-house team.  

According to a more recent version of that same study, the in-housing movement didn’t stop throughout the pandemic. It revealed, “80% of respondents said they have brought more marketing assignments in-house since the onset of the pandemic, with 50% saying the increase was directly triggered by the events of the past two years.”

Businesses seem well-satisfied with the results because the urge to in-house is poised to grow beyond creative teams. For example, a recent survey by the customer intelligence company Axciom found about 50% of respondents believe the “in-housing is currently a top marketing objective, and 40% expect it will remain a top priority in the coming years.”

2. Outside Agencies Hired for Specialized Skills

Despite the in-housing trend, there is still opportunity for agencies, consultants, and freelancers, particularly those with specialized skills. Even the consumer-packaged goods giant Proctor & Gamble, a leading example of brands bringing marketing and creative teams in-house, still needs outside service providers.

Indeed, while in-house creative teams produce the lion’s share of creative work, the vast majority (86%) also continue to partner with agencies and freelancers; according to our own research, published in our 2021 Creative Management Report, which was facilitated by Lytho (formerly inMotionNow) and based on a survey of 400 creatives and marketers. 

When the survey asked creatives why they hire outside resources, the top reason was access to specialized skills (60%). That was followed in a distant second by a need for increased capacity (44%), help with developing strategy (24%), and, lastly, to get work done faster (20%). 

“It is very unusual for an in-house team to have no outside resources that they lean on,” wrote Alex Blum of Blum Consulting Partners, Inc. in a written assessment of the survey results.

He says there are two primary ways to partner with agencies. “First, for overflow capacity. There is always a need for more creative resources, and agencies can offer that flexibility without the cost of maintaining larger teams,” he wrote. “Second, in-house teams can divide areas of ownership with an agency based on the skill sets they have in-house.”

3. The Creative Process Evolves

Marketing today is dominated by an insatiable thirst for fresh content, produced and polished by creative teams. The demand for that content continues to explode. 

What does this portend for creative teams? Despite adding headcount, creative requests exceed the creative team’s capacity to produce it – even as lead times shrink. Matthew Rayback, the creative director at Adobe, suggested the creative process must evolve. 

He likens creatives to an auto factory, where “creatives used to be the assembly line to make a single car.” However, today, creatives are tasked with creating more cars, each with unique adjustments such as personalization. 

“The assembly line we built can’t accommodate that speed or volume,” he says. So the whole factory – the entire creative process – must be overhauled to adapt. 

4. Quantitative Measurement Drives Creative Priorities

Current methods for measuring the value of creative teams center on outputs. That is to say, the metrics tracked tend to quantify the number of creative projects in progress, the rounds of review, and the number of projects completed over time. 

These metrics are important, but alone they are insufficient. A complementary way to prioritize large volumes of creative requests is focusing on those tasks most likely to move the business needle. The barrier to achieving this is that most creatives aren’t kept informed as to the outcomes of marketing campaigns fueled by their creative efforts. This must change.

With the growing demand for content, the margin of error for applying creative resources to projects that don’t correlate to business results shrinks. Marketing organizations must build a feedback loop that brings quantitative results back to the creative team. In turn, creative teams must learn to use the data to drive their work priorities in collaboration with marketing. 

5. Creative Resource Management Becomes Essential

Resource management is both a leadership concept and technology (or a combination of technologies). It’s a means to plan, track, collaborate and measure creative operations, including people, processes, and budgets.  

Traditionally, planning and tracking of all things creative and marketing occurred in a spreadsheet. It works well when the future is generally predictable – yet cliché as it may be to say it – we are living in a state of uncertainty. 

Like many trends over the last 18-24 months, the global pandemic “forced virtual experiences, disrupted marketing channels and campaigns, and accelerated companies’ transition to digital marketing,” according to Forrester. The research firm calls resource management “essential” because it helps move “planning from static spreadsheets to a dynamic and real-time environment.” 

Final Thoughts

Yogi Berra paraphrased an old Danish proverb when he said, “It’s tough to make predictions, especially about the future.” Even so, the pandemic has accelerated trends that were already underway, and these five trends are good examples. More than just watching them, creative and marketing leaders should take steps now to get ahead of them.

 

Featured image via Pexels.

Source

The post 5 Creative Management Trends to Watch in 2022 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

How to Get Started with the MVP Workflow

,

Few things are more important to a web designer or developer’s chances of success than having the proper workflow. The term “workflow” applies to the set of standardized steps you or your company uses to create, test, and deploy designs or products.

Over the years, as development processes have evolved, so too have the workflows experts use to bring their ideas to life. The MVP workflow, or “Minimum Viable Product” strategy, is one of the most popular options in 2022.

Here’s what you need to know about the MVP workflow and how it differs from some of the other standard workflows developers may be used to.

What is the Designer/Developer Workflow?

As mentioned above, the designer/developer workflow is a series of steps used by experts in the web design world to achieve a creative goal. The process includes the steps taken to start a project, evolve it, and finish it. Since software is never developed without tools, the technology you’ll access throughout the development process is also considered in most workflows.

An example of a standard development workflow might look like this:

  • Scaffolding: This is the stage wherein you start your new web project, creating a git repo, downloading libraries, preparing file structures, and completing other tasks to make sure your product is ready to roll out into the world.
  • Develop: This is where you’ll spend most of your time writing code for your application or website. The development process may include various specific tools and support from other staff members.
  • Test: In this stage, you examine the functionality of your code to determine if everything works as it should. If there are errors or issues, you can go back and develop fixes to the potential problems. Your code may go through the development/test process several times before you can move to the next stage.
  • Integrate: This is when you merge the code for your part of the development process with the rest of the team. You can also integrate your code into websites and existing apps at this point. If you’re working solo, you can skip this process.
  • Optimize: You prepare all your assets for use on a production server during the optimization stage. Files are generally optimized to ensure your visitors can view your site easily or access your applications with ease.
  • Deploy: In the deployment stage, developers push code and assets up into the server and allow for changes to be viewed by the public.

What is MVP? (Minimum Viable Product)

Now you know what a developer workflow looks like, you can begin to assess the concept of the “MVP” workflow. The term “MVP” stands for Minimum Viable Product.

The idea of “Minimum Viable Product” applies to a range of industries, from education to healthcare and government entities. This term comes from lean start-up practices and focuses heavily on the value of learning and changing during the development process.

When you adapt your workflow to focus on an MVP, you’re essentially adjusting your focus to a point where you can create a stripped-back version of something new – like an app or a website. The MVP is built just with the core features (the minimum), so you can bring the idea to market and test it as quickly as possible.

For instance, if your goal were to create an attractive new website for a client, an MVP would focus on implementing the crucial initial tools, and nothing else. While you may create checkout pages, product pages, and other aspects of the site, you wouldn’t populate it with content or start experimenting with bonus widgets and apps.

So, how does this offer a better alternative to the standard workflow?

Simply put, an MVP workflow is quick, agile, and easy. The idea is you can validate key concepts with speed, fail quickly, and learn just as fast. Rather than having to build an entire app and almost start over from scratch every time you find an error, you can race through the iteration and development process.

MVP workflows are also highly appealing to start-ups and entrepreneurs hoping to validate ideas without a massive amount of upfront investment.

Examples of MVP Workflows

Still confused? The easiest way to understand how an MVP workflow works is to look at an example.

Let’s start with a conceptual example. Say you were building a voice transcription service for businesses. The desired features of this product might include the ability to download transcription, translate them into different languages, and integrate them into AI analytics tools.

However, using the MVP approach, you wouldn’t try to accomplish all of your goals with your software at once. Instead, you’d focus on something simple first – like the ability to download the transcripts. Once you confirm you can do that, you can start a new workflow for the next most important feature for the app.

One excellent example of a company with an MVP approach is Airbnb. The entrepreneurs behind this unicorn company, Joe Gebbia and Brian Chesky, didn’t have a lot of cash to build a business with at first. They had to use their own apartment to validate the idea of creating a website where people could share their available “space” in a home or apartment with the public.

To begin, Airbnb only created a very basic website, published photos of their property, and waited to see the results. After discovering people were genuinely interested in renting another person’s home, the company was able to begin experimenting with new ideas to make a site where people could list their properties for travelers.

The Pros and Cons of an MVP Workflow

There are a lot of benefits to the MVP workflow – particularly when it comes to gaining agility and developing new products quickly. However, there are downsides too.

Pros

  • With an MVP approach, you can maximize your learning opportunities and create a more innovative, successful product at speed. You get to test every step of the way.
  • You release iterations or versions of your product quickly, which means you discover problems faster, allowing you to quickly solve these issues.
  • You build on the benefits of customer fans, “evangelists” in the marketplace who are keen to help your product or service grow.
  • An MVP gives you more freedom to try out unique ideas and “risks” you might otherwise avoid with a traditional workflow.
  • Because you’re focusing on creating only the “minimum viable product,” you don’t have to spend a fortune on initially setting up your workflows.

Cons

  • Agile work with an MVP flow requires a lot of effort in collecting constant feedback from customers and releasing iterations.
  • You’ll need to dedicate yourself to releasing many small and frequent product releases on a tight schedule.
  • You might have to revise the functionality of your product or app a number of times.

Creating Your MVP Workflow

If you believe an MVP workflow might be effective for you, the first step is defining your “Minimum Viable Product.” The app, website, or product you design needs to align with your team’s strategic goals, so think about what your company is trying to achieve at this moment – before you get started. If you have limited resources, or specific purposes, like improving your reputation as a reliable company, now might not be the right time to develop a new MVP.

Ask what purpose your minimum viable product will serve and what kind of market you’re going to be targeting. You’ll need to know your target customer to help you test the quality and performance of each iteration of your MVP. Once you know what your ideal “product” is, ask yourself what the most important features will be.

You can base these decisions on things like:

  • User research
  • Competitive analysis
  • Feedback from your audience

For example, if you’re producing an AI chatbot that helps companies to sort through customer inquiries, the most important “initial feature” may be the ability to integrate that bot into existing websites and apps owned by the company.

MVP Approach Guidelines

Once you have your hierarchy of most valuable features for your minimum viable product, you can translate this into an action plan for development. Remember, although you’re focusing on the “minimum” in development, your product still needs to be “viable.” In other words, it still needs to allow your customer to achieve a specific goal.

  • Review your features: Reviewing your prioritized product requirements and the minimum level of functionality you can deliver with each of these “features.” You need to ensure you’re still providing value to your customer with anything you produce.
  • Build your solution: Build your minimum set of features for the product or service. Remember to build only what is required. You can use methodologies like the agile or waterfall method to help guide your team during this process.
  • Validate your solution: Release your offering into the market, and ensure you have tools in place to gather feedback from early adopters. Use beta programs, focus groups, and market interviews to understand how your solution works for your customers and where you can improve on your current offer.
  • Release new iterations: Based on what you learn from your target audience, release improvements to your product quickly. Use your validation strategies to collect information from your audience with each release.
  • Review again: Go back to your product requirements and desired features and start the process over again, this time focusing on the next most valuable functionality. Over time, the value of your minimum viable product will increase.

Using the MVP Workflow Approach

While the MVP workflow approach might not be the right solution for every development or design team, it can work very effectively in the right circumstances. The MVP approach doesn’t minimize the importance of understanding market problems and delivering value. Instead, the focus is on delivering quick value that gradually increases and evolves over time.

As many developers and designers know, the most useful form of product validation in most cases is real-world validation. When your customers have had an opportunity to use a product on a day-to-day basis, they can provide much more effective feedback.

Just keep in mind that committing to the MVP approach also means changing your workflow and committing to iterations – otherwise, other features may never be completed. You’ll need to be willing to work quickly and in small bursts without getting too heavily caught up in one feature or functionality.

 

Featured image via Pexels.

Source

The post How to Get Started with the MVP Workflow first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

Debunking Four Metadata Myths

,

Data is being accumulated at an alarming rate due to the growth of unstructured data. Within that is metadata, which allows us to quickly find data files by identifying certain properties. It wasn’t until recently that developers had to pay closer attention due to the overwhelming effect it was having on our data engines. Metadata used to just be a thing that could be stored in memory behind the scenes without any worry, but its expansion presents the growing concern of where to store it and how to manage it.

Every database system, whether SQL or NoSQL, uses a data engine (aka storage engine), embedded or not, to manage how data is stored. Our ever-growing volume of data has outgrown our data engines’ infrastructures and with that, they are stretched to their limits and forced to make painful trade-offs necessary to support the scale and performance requirements of modern datasets.

Source de l’article sur DZONE

/par

How to Prepare for the Immersive Web

,

Websites as we know them are going to change very soon. The days of text, images, and basic interactions in a 2D browser window have served us well, but virtual, augmented, and mixed reality experiences are getting better all the time. Developers and designers need to think beyond the browser window and prepare for an immersive future.

Many have been very skeptical about VR and AR in the past because despite grand promises about what they would achieve, they’ve mostly failed to deliver on the scale that the industry hoped for.

But it’s different this time: industry leaders like Meta, Apple, and Microsoft are pursuing a range of different mixed reality projects; they see the opportunity and are dropping hints about what’s next.

In a survey from Perkins Coie LLP and the XR Association, nearly 9 in 10 respondents said that by the year 2025, immersive technologies—including augmented reality, virtual reality, and mixed reality — will be as ubiquitous as mobile devices.

That’s a bold prediction, but it could be our new reality.

Use Cases

VR and AR aren’t a logical fit for every website, and that’s fine. There’s no need to force an immersive experience on something better suited to a standard viewing experience.

But when they’re done right, 3D experiences can add a lot to your website. Check out the demo experience from Mozilla, the 3D tours from Matterport, and the immersive storytelling from Within.

Here are a few areas where these technologies shine:

  • Retail – VR can be used to provide a virtual showroom where customers browse through products. AR can even bring the products into your home by showing you how a piece of furniture will fit in your room, what a painting will look like on your wall, or in Apple’s case, how a product will look on your desk.
  • News – Coverage of events can be enriched by providing a 360-degree view and placing viewers in the center of the story.
  • Training – AR can generate virtual overlays over physical equipment so employees can have hands-on training that’s more effective.

Define Your Platform

Adding immersive experiences to your website will require various skills based on what you’re trying to create. Whether you’re new to web development or are a seasoned developer with many years of experience, the main difference from classic web development is that you’re switching from a 2D to a 3D experience. Development in VR/AR is much closer to developing 3D video games than creating web applications.

First of all, you need to decide on the hardware that you’re building for. Are your viewers mainly using computers, smartphones, or a headset like the Oculus Quest? Each hardware category offers a different set of capabilities for what’s possible.

Next, when we look at 3D engines and frameworks on the market, some big names like Unity, Unreal Engine, and CRYENGINE stand out. Most of these engines were spun out of game development and are based on programming languages like C, C++, or C#. While very powerful, they’re overkill for anyone trying to create a basic immersive web experience.

The good news for web developers is that the WebXR Device API is an open standard specified by the W3C with a JavaScript API that makes immersive experiences possible in the browser. So if you already have a background in web development, you can use your knowledge of JavaScript to get started.

There are some useful frameworks and platforms that make working with WebXR more convenient:

  • A-Frame – A web framework for building 3D experiences.
  • React 360 – A framework for the creation of interactive 360-degree experiences that run in the web browser. As the name already suggests, it builds on React and reuses the concepts you already know.
  • Amazon Sumerian – A managed service that lets you create and run 3D, AR, and VR applications. Since it’s integrated into the AWS ecosystem, it’s also possible to add AI-enabled elements into your generated world.

Create Your Content

No one wants to read long blocks of text in 3D. Since we’re talking about visual experiences, it’s logical that the emphasis should be on creating content that is pleasing to the eye and interesting to look at. What works on a normal website probably isn’t going to feel natural in a 3D environment, so you need to decide what visuals you should create to suit the format.

What high-resolution images and assets do you need? Can you add videos? How about 360-degree videos? Will viewers just be looking at something, or will they be able to interact with it?

You also can’t forget about sound because it’s a critical part of immersive experiences. What music and sounds should you create to make the content come alive?

Not everyone is going to have the latest and greatest device or 5G coverage. The requirements for bandwidth and transmission quality are much higher with 3D content. A few milliseconds of latency can go unnoticed on a typical website, but in a VR/AR setting, it can make the experience laggy or unusable.

Try to optimize your content to be the highest quality it can be within a reasonable file size. If the experience starts to suffer from too many assets downloading at the same time, it’s better to create a more streamlined experience that maintains a high performance rate.

It’s important to consider your hosting infrastructure, as well. This shouldn’t be a big problem, but it is worth mentioning that you need to add new content types to your configurations, and your CDN needs to support these new types, too.

Make Your Content Flexible

When we’re talking about getting your website ready for immersive experiences, we’re not just talking about having people scroll through your regular website in VR. That isn’t compelling for your audience.

The idea is to take some content that’s already on your website and separate it from the presentation layer so you can use it in a 3D environment or any other platform that you want. Classic content management takes place in silos, which means you cannot easily reuse the content from your website.

This separation can be achieved by using a classic database, but if you want developers and content teams to collaborate, a headless CMS is front-end agnostic and more user friendly.

Start Experimenting Today

Building 3D content experiences may seem intimidating, but as we’ve seen, you likely already have the web development skills necessary to get started and try out some different ideas.

What you build today will prepare you for the 3D future of tomorrow.

 

Featured image via Pexels.

Source

The post How to Prepare for the Immersive Web first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

/par

Protect Your Design Clients From These 6 Easy Mistakes

,

As a web designer, you’re responsible for a lot of things. Your client is relying on you to ensure that their website is user-friendly, accessible, eye-catching, and even good enough on the back-end to capture the attention of the search engines. 

However, what many business leaders and clients don’t realize is that they also have a part to play in ensuring that they get the right results from their site; there’s more to the client and contractor relationship than an exchange of funds. 

Today, we’re going to examine some of the most common mistakes that clients make when they begin working with a website designer for the first time. After all, when a client makes a mistake, it’s up to you to show them how to get back on track. 

Client Mistake 1: Providing Minimal Insight

Creativity, for the most part, is the responsibility of the designer in any web-building project. You know best what you can do for a client. 

When you’re discussing an upcoming project with a business owner, you can walk them through concepts like dark mode design or strategies for digital accessibility. However, you’re still reliant on your client to let you know if there’s anything specific they need. 

An insufficient brief in a web design project usually means that you waste time on a project because you have to go back and forth multiple times, making updates and edits. Getting a brief ironed out properly from day one can reduce misunderstandings and mistakes. 

To get your client started, ask them to share some details like:

  • Who’s the target audience? Do they have a user persona they can share?
  • What specific features does the site need? Landing pages, forms, widgets, etc.?
  • Competitor sites they like: What do they appreciate about those designs?
  • Brand colors and assets: What kind of hues and shades should you use?
  • Technical feature requirements: Does the site need to have its own app, integrate with APIs, or have a checkout solution, for instance?

Client Mistake 2: Underestimating The Workload

Perhaps one of the most common mistakes that clients make when seeking help from a designer is that they have no idea how much work it will take to create the kind of site they want. If they haven’t provided a great brief in the first place, they might not have had a chance to see all the work they’re asking for written down. Walking your client through the brief process can help here. 

On the other hand, if your client has already provided a brief, along with an unrealistic deadline for completion, you might need to have a discussion with them about what you need to do. Walking your client through some of the processes involved in creating their website could give them an insight into how long it will realistically take to bring their ideas to life. 

Additionally, ensuring that your customers fully understand the amount of work you’re taking on could also mean that they can better grasp why you’re charging a certain price for your services. That brings us neatly to the next mistake…

Client Mistake 3: Not Having The Right Budget

Pricing your design services can be a complicated process for web designers. You need to make sure that you’re charging enough to cover the cost of things like essential software and hardware for your company. At the same time, with so many other designers out there, you also need to ensure that your costs are competitive. 

After you’ve gone through the hard work of figuring out what your pricing structure should be, you also need to be capable of justifying that expense to your client. It’s common for many customers to go into their work with a web designer expecting that they’ll be able to get an entire website, blog, and app for less than a couple of hundred dollars. 

Make sure that your client is aware of your pricing immediately to avoid any confusion. If possible, have a pricing page on your website or portfolio which highlights the cost of different packages and precisely what your clients are going to get. 

If your customers can see the value in your services and even equate to an hourly workload or skillset, they might be better equipped to set the proper budget. 

Client Mistake 4: Making Too Many Technology Decisions

You’ll find that you work with many different types of client during your time as a web designer. Sometimes, you’ll have people who come to you not really knowing what they want or need. This means that you may need to spend some time speaking to them about their expectations and discussing what’s possible. 

On the other hand, there’s always a chance that you could work with a client who thinks that they should be making all of the decisions themselves. While it’s true that your client should have some control over things like the style of their website and what features it has, it’s up to you to make technical decisions like what kind of tools you’re going to use. 

If your client tries to dictate everything you do and how you’re going to do it, this could make it difficult for you to deliver your best work. Explain your processes to your customer in advance and find out why they want you to use specific technology. 

For instance, if your client wants to use a specific kind of website builder because they’ve heard it’s “the best,” you can explain what you like most about the product you’re already using. 

Client Mistake 5: Being Too Attached To An Idea

This is a problem that happens in a lot of creative industries. A client goes out and finds something that they like on another website. It might be an attractive landing page or a specific checkout process. They’re so excited by what they see there that they refuse to compromise on that idea when working with their designer – even if the concept isn’t suitable. 

For instance, your client might come to you wanting a website that’s full of dynamic animations and videos. However, if they only have a limited amount of bandwidth from their hosting provider, this could mean that they end up with a slow site that aggravates their customers. 

The best thing you can do when this happens is to present the issue to your client in a way that they can understand. For instance, if you’re worried something will slow down their website, talk to them about how speed is essential to good customer experience. You could even share some page speed stats like: if a page takes more than 3 seconds to load, over half of all visitors will abandon it. 

Seeing the stats for themselves could mean that your clients are more likely to change their minds. 

Client Mistake 6: Working With The Wrong Designer

Finally, one of the biggest mistakes any client can make is working with the wrong website designer. There are a lot of professionals out there, each with their unique skills to offer in things like UX design, ecommerce page creation, and so much more. However, it’s not always easy to know what you need as a business owner getting online for the first time. 

The good news for web design clients is that there’s a lot of information out there that you can use to get informed fast. The bad news for designers is that this means you’re going to need to work at keeping your skills on the cutting edge if you want to attract the widest selection of customers. 

To ensure that you’re more likely to be the right designer for your customers, stay up to date with the latest web design standards, and check out what’s trending in your industry. Webinars, articles, and even TED talks can be an excellent way to brush up your knowledge and make your portfolio much more appealing. 

Strengthen Your Client/Designer Relationships 

Succeeding as a web designer isn’t just about building a robust portfolio full of excellent websites where you can showcase your skills. While it’s true that you need to stay on the cutting edge with your design talents, you also need to make sure that you can create positive relationships with every client that comes to you. 

Like designers, clients can make mistakes too, but not knowing what they want, trying to take too much control, or simply failing to understand the scope of a product. Rather than letting those mistakes hold you back, prove your mettle as a designer by helping your clients navigate these issues. The result will be more streamlined project experiences, happier customers, and better reviews for your company. 

 

Featured image via Unsplash.

Source

The post Protect Your Design Clients From These 6 Easy Mistakes first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

Learn multithreading and async in 1 minute with Hyperlambda

,

For everyone having done multithreading and async programming, it’s fairly obvious that the amount of complexity required to (correctly) implement threading and async increases the cognitive requirements to understand the codebase to sometimes unfathomable amounts. Typically, this results in difficult to track down bugs, and over time what we often refer to as « spaghetti code » or « the big ball of mud ». To put this into context, I’d like to put forth a statement in regards to this.

Everyone who (falsely) believes they understand threading and async, don’t understand threading and async!

Source de l’article sur DZONE

/par

4 Steps to Improve PageSpeed Insights Score and SEO

,

PageSpeed Insights is a free performance measurement tool provided by Google. It analyzes the contents of a web page for desktop and mobile devices. It provides a single number score (from 1 to 100) that summarizes several underlying metrics that measure performance. If you have not run PageSpeed Insights on your website, then you should stop and do it now. It’s an important indicator of how Google scores and ranks your site.

If your PageSpeed Insights score is below 80, don’t panic. You are not alone. Many websites are not optimized for performance. The good news is that you can take steps that should immediately improve your score.

You will notice that PageSpeed Insights highlights issues that cause slow page loading. However, you might need more guidance to resolve these issues. Below, we walk you through how to resolve four common issues related to images. We also show you how ImageEngine, an image CDN, can simplify, automate, and deliver the best image optimization solution possible.

Performance Drives Google SEO Rankings

Why does the PageSpeed Insights score and performance matter? Isn’t SEO ranking all about content relevance, backlinks, and domain authority? Yes, but now performance matters more than it did a year ago. Starting in 2021, Google added performance metrics to the factors that impact search engine rankings. In a market where websites are constantly jockeying to match their competition’s pages (for content relevance, keywords, and other SEO issues), performance is making a difference in keyword search engine rankings.

What Are Core Web Vitals Metrics?

PageSpeed Insights relies on a set of performance metrics called Core Web Vitals. These metrics are:

Largest Contentful Paint (LCP): Measures the render time (in seconds) of the largest image or text block visible within the viewport, relative to when the page first started loading. Typically, the largest image is the hero image at the top of pages.

First Input Delay (FID): Measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

Cumulative Layout Shift (CLS): Measures the layout shift that occurs any time a visible element changes its position from one rendered frame to the next.

Images and JavaScript are the Main Culprits

PageSpeed Insights breaks down problems into categories based upon how they impact these Core Web Vitals metrics. The top two reasons why you might have a low score are driven by JavaScript and images.

JavaScript issues are usually related to code that either blocks or delays page loading. For example, lazy-loading images might involve JavaScript that blocks loading. As a rule of thumb, do not use a third-party JavaScript library to manage image loading. These libraries frequently break the browser’s built-in image loading features. Lazy-loading may make above-the-fold images load slower (longer LCP) because the browser starts the download later and because the browser first has to execute the JavaScript.

Another JavaScript issue involves code that is large or unnecessary for the page. In other words, code bloat. There are good resources for resolving these issues on the web. However, in this blog, we will focus on image problems.

Images are a major contributor to poor performance. The average website payload is 2MB in 2021, and 50% of that is images. Frequently, images are larger than they need to be and can be optimized for size with no impact on quality…if you do it right.

Four Image Issues Highlighted by PageSpeed Insights

Largest Contentful Paint is the primary metric impacted by images. PageSpeed Insights frequently recommends the following four pieces of advice:

  1. Serve images in next-gen formats.
  2. Efficiently encode images.
  3. Properly size images.
  4. Avoid enormous network payloads.

That advice seems straightforward. Google provides some great advice on how to deal with images in its dev community. It can be summarized in the following steps:

  • Select the appropriate file format.
  • Apply the appropriate image compression.
  • Apply the right display size.
  • Render the image.
  • Write responsive image code to select the right variant of the image.

We call Google’s process the “Build-Time Responsive Syntax” approach. If you have a relatively static website where you don’t generate new pages or switch out images frequently, then you can probably live with this approach. However, if you have a large and dynamic site with many images, then you will quickly feel the pain of this approach. Google itself stresses that developers should seek to automate this image process. Why? Because the process has some serious workflow drawbacks:

  • Adds storage requirements due to a large increase in image variants.
  • Increases code bloat and introduces more code complexity.
  • Requires developers’ time and effort to create variants and implement responsiveness.
  • Requires logic to account for different browser’s support for next-gen image formats.
  • Doesn’t adapt to different contexts. It relies on best-guess (breakpoints) of what device visits the web page.
  • Needs a separate CDN to further increase delivery speeds.
  • Requires ongoing maintenance to adapt to new devices, breakpoints, image formats, markets, and practices.

Key Steps to Achieving High-Performance Images

Instead of using the Build-Time Responsive Syntax approach, an automated image CDN solution can address all of the image issues raised by PageSpeed Insights. The key steps of an image CDN that you should look for are:

  1. Detect Mobile Devices: Detection of a website visitor’s device model and its technical capabilities. These include: OS version, browser version, screen pixel density, screen resolution width and height, support for next-gen image and video formats. This is where ImageEngine is unique in the market. ImageEngine uses true mobile device detection to further improve image optimization. It has a huge impact on the effectiveness of the image optimization process.
  2. Optimize Images: An image CDN will leverage the device’s parameters to automatically resize, compress and convert large original images into optimized images with next-generation file formats, like WebP and AVIF. Frequently, an image CDN like ImageEngine will reduce the image payload by up to 80%.
  3. Deliver by CDN: Image CDNs like ImageEngine have edge servers strategically positioned around the globe. By pushing optimized images closer to requesting customers and delivering them immediately from the cache, it often provides a 50% faster web page download time than traditional CDNs.

Easy Integration Process for Image CDN

After signing up for an ImageEngine account and free trial, you will receive a Delivery Address. After adjusting your <img /> elements to include the Delivery Address, ImageEngine will start to pull the original images from your website (no need to move or upload them), automatically optimize them, and deliver them.

You can automate the addition of the Delivery Address to the img src tag by using plug-ins for WordPress and Magento. Developers can also use ImageEngine’s React, Vue, or Angular JavaScript frameworks to simplify the process.

Additionally, there are many ways to simplify implementation via adjustments to templates for many CMS and eCommerce platforms.

Results: Improved Performance, Better SEO

Most ImageEngine users see a huge improvement in LCP metrics, and consequently, a big improvement in the overall PageSpeed Insights score. ImageEngine provides a free demo analysis of your images before and after image optimization. In many cases, developers see improvements of many seconds on their LCP and Speed Index.

In summary, performance drives higher search rankings, and better UX, and increases website conversions for eCommerce. The steps you take to improve your image performance will pay for themselves in more sales and conversions, streamlined workflow, and lower CDN delivery costs.

Source

The post 4 Steps to Improve PageSpeed Insights Score and SEO first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

9 Best Software Architecture Books and Sites

,

Technical leaders and senior developers often ask me about any specific books in software architecture and websites they should read to start working as software architects. I think that the developer is mature enough to develop a technical solution and he or she needs only some additional soft skills.

So, I hope that this list of books will be useful for any technology stack and domain. These books and websites give general information about architecture patterns, technical documentation, techniques to get non-functional requirements and develop soft skills.

Source de l’article sur DZONE

/par

Quick Ways to Make a Webpage More Scannable

,

In the information age, time is a valuable commodity and something people don’t want to spend too much of. As a result, the average visitor only reads about 20% of the content of a page. 

For web designers and developers, that means a few things: first, you need to ensure that the web pages you create are as engaging as possible; secondly, you need to find a way of making the critical information on any page stand out; thirdly, every modern designer needs to create assets that are easy for today’s fast-paced customers to use. 

Making websites more scannable is how you do your part as a designer to ensure that the customers who come to a page get the quick and convenient experiences they need. 

So, how do designers embrace scannability?

Designing for Scannability: An Introduction

At first glance, the concept of creating a website for scannability is strange. 

Most designers start their projects with the aim of making customers stay on a page for as long as possible. So it’s odd to think that you would want to make it simple for end-users to skip from one page to another on a website in a matter of seconds. 

However, scannability isn’t just about delivering information and getting users off a page. When sites are scannable, they make it quicker and easier for customers to slide down the purchasing funnel. A quicker and more convenient customer journey leads to a stronger user experience and more conversions. 

Look at Netflix, for instance. It doesn’t give interested users a ton of information on its homepage. Instead, the key USPs of the product are laid out bright and bold in the middle of the screen, along with one simple call to action: Get Started.

Designing for scannability means making it easy for users on a page to glance at a screen and instantly access all the information they need to take the next step in their buyer journey. 

There’s no needless scrolling or wondering what to do next. 

According to analyst Jacob Nielsen, scannability is essential because people look for specific things on every page they visit. 

Customers don’t read through web pages word by word. Instead, they scan through the content, plucking information out that serves their requirements. 

Questions to Ask When Designing for Scannability

So, how do you know if your web pages are scannable?

Start by asking the following questions:

  • What’s the intent of the people who arrive on this page?
  • What kind of information needs to be conveyed instantly?
  • Can the visitor see the next step in their journey immediately?

For instance, when someone arrives on the Evernote homepage, you can assume that they want to:

  • Find out about Evernote
  • Learn how to sign up
  • Jump to other pages to find out about features, and contact details

That’s why the designer behind the Evernote website placed an immediate piece of useful information at the top of the page: “Tame your work, organize your life” tells customers exactly what the entire product is all about. The brief paragraph of information underneath can provide a few more details if customers need it, then there’s an immediate call to action: Sign up for free. 

Not only does the call to action tell users what to do next, but it tells them the most important information they need straight away: it’s free. 

Scannable pages like this are useful because:

  • They help users complete their tasks quicker: Whether you want to sign up or learn more about the product, everything you need is available instantly, with no scrolling required. 
  • The bounce rate is reduced. Customers don’t get confused and hit the back button. That’s good for your client’s SEO and their bottom line. 
  • The website looks and feels more credible: Because customers get all the answers to their questions immediately, they’re more likely to trust the website. 

So, what are some of the best things you can do to make your sites as scannable as possible?

Use Visual Hierarchy

Visual hierarchy is a way of organizing the content on your website in a way that adheres to how people use the website. For instance, if you land on a blog page, you expect to see the headline first, maybe some information about the writer, and any other essential information, followed by the body content. 

Although it’s tempting for designers to try and surprise users with new visual strategies, the best way to make your content more scannable is to give end-users precisely what they expect. 

If you’re not sure what a page should look like, try checking out the competition. 

One of the most obvious visual hierarchy rules is that the main navigation should always go at the top of the page. 

Customers will expect to look at the top of the page to find navigation. They don’t want to have to scroll through your website, searching for a way to get to another page. If you want to make it as easy as possible for end-users to jump from one page to another, you can pin the navigation bar to the page so that it stays with users as they scroll. 

Maintain Negative Space

White space, negative space, or whatever you call it – is the part of your design that’s left empty. 

White space is crucial because it gives all of the objects on your page some much-needed breathing room. Without enough negative space on your pages, it’s impossible to embrace scannability because there’s too much information for a customer to take in at once. 

For instance, notice how there are big gaps of space between every element on a Forbes website post. A proper amount of negative space on your site ensures that users can quickly take in chunks of information and use that information to decide what to do next. 

To ensure there’s enough negative space on your website pages, ask yourself what the key elements visitors will notice when they come to a website. The essential items should be:

  • A title or header to confirm that the user is in the right place
  • A CTA that shows your user what to do next
  • A navigation header or menu
  • Critical information includes an introduction to what a page is about or an excerpt from the blog post they’re about to read. 
  • A visual component: A picture or image that gives context to the page. 

Anything else can usually be removed. So, for instance, if Forbes wanted to make the page above more scannable, they could easily remove the ads and social media sharing buttons.

Make the Next Step Obvious

Every page on a website exists in a hierarchy within the customer journey. 

A homepage leads customers to product pages, which leads to a checkout page, which connects to a thank-you page that sends the visitor back to another product page, and so on. 

When designing for scannability, it’s crucial to make the next step in the journey as obvious as possible. Usually, this means placing the call to action “above the fold,” where the customer can see it immediately.

Ideally, scannable pages should have just one CTA. This will stop your audience members from being confused or overwhelmed by choice. 

However, if you’ve got multiple CTAs, think about the average customer’s journey and what they’ll want access to first.

If those buttons don’t appeal to the customer, they can scroll a little further and see other “next step” options, like shopping for “self-isolation essentials” or browsing other popular product categories:

Test Every Page

Testing for scannability means examining every page and making sure that it’s as easy as possible for customers to move through the buying process as fast as they want to. 

Visit each page you design in a buyer journey and ask how quickly it would take end-users to get from point A to point B and beyond. Here are some of the common issues that might slow the customer’s journey and harm scannability:

  • Readability: Is the font legible? Is it large enough to read on all screens, including mobile devices? Legibility in the design world measures how quickly and intuitively your users can distinguish what’s going on any page. Remember that the color of the background, the amount of negative space around copy blocks, and even font pairing can impact the readability of the content. Show your pages to multiple people and time how long it takes for them to grasp the message that you’re trying to convey. 
  • Fluff: Fluff and extra features can make your pages more intriguing, but they can also slow users down. For instance, one picture at the top of a blog page can add context to the article. A slideshow of pictures stops the customer from progressing and keeps them stuck at the top of the page for longer. 
  • Words instead of numbers: According to Nielsen, eye-tracking studies show that numerals often stop the wandering eye. Numbers are compact and more regularly associated with statistics and facts, so they’re more likely to grab attention. If you want to get important points across to end users fast, use numbers, not words. 

Creating Scannable Pages

Scannability is becoming an increasingly important concept in today’s busy landscape. 

Now that more customers are browsing websites from their smartphones or checking out products on the move, designers need to think more carefully about adjusting to this agile environment. 

Scannable pages that move visitors along the buying cycle and into the next stage of the funnel will deliver better results for your clients, and therefore better outcomes for you. 

Source

The post Quick Ways to Make a Webpage More Scannable first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

/par

How to Use GitBook for Technical Documentation

,
Intermine, where I was tasked with creating new user training documentation. For this project, I entirely rewrote the Intermine user documentation — which included images, code snippets, tables, mathematical formulas, and more — using GitBook. This guide will share my experience creating technical documentation using GitBook and act as a de-facto quick-start guide to GitBook.

What is GitBook?

GitBook is a collaborative documentation tool that allows anyone to document anything—such as products and APIs—and share knowledge through a user-friendly online platform. According to GitBook, “GitBook is a flexible platform for all kinds of content and collaboration.” It provides a single unified workspace for different users to create, manage and share content without using multiple tools. For example:

Source de l’article sur DZONE

/par