Articles

26 Exciting New Tools For Designers, May 2021

From dev tools to productivity to a little bit of fun with sudoku, this month’s collection of new tools is packed with something for everyone.

Here’s what new for designers this month.

May’s Top Picks

Am I FLoCed?

Am I FLoCed? Is a tool to see if you are part of a Google Chrome origin trial. It tests a new tracking feature called Federated Learning of Cohorts (FLoC). According to Google, the trial currently affects 0.5% of users in selected regions, including Australia, Brazil, Canada, India, Indonesia, Japan, Mexico, New Zealand, the Philippines, and the United States. The page will try to detect whether you’ve been made a guinea pig in Google’s ad-tech experiment.

According to the designers of Am I FloCed: “FLoC runs in your browser. It uses your browsing history from the past week to assign you to a group with other ‘similar’ people around the world. Each group receives a label, called a FLoC ID, which is supposed to capture meaningful information about your habits and interests. FLoC then displays this label to everyone you interact with on the web. This makes it easier to identify you with browser fingerprinting, and it gives trackers a head start on profiling you.”

Uncut

Uncut is a Libre typeface catalog that just got started in April. It features contemporary typefaces and styles and is set to be updated regularly. Sort by sans serif, serif, monospace, or display typefaces. Plus, you can submit a typeface for inclusion.

Dashblock

Dashblock allows you to build automations without coding. Use it to create visual automations, or turn blocks into use-cases. (It is a premium tool, but comes with a 14-day free trial to test it out.)

Instant

Instant is a fast and secure one-click checkout tool that works with WooCommerce. Users fill out a short form the first time they shop and then join the network to enable instant, frictionless, 1-click checkouts without passwords. It makes shopping easier and cuts abandoned carts.

5 Image Tools

Triangula

Triangula uses a modified genetic algorithm to triangulate images. It works best with images smaller than 3000px and with fewer than 3000 points, typically producing an optimal result within a couple of minutes. The result is a nifty-looking image.

Content-Aware Image Resizing in Javascript

Content-Aware Image Resizing in Javascript solves that problem with images where you have a photo but it just doesn’t quite fit. A crop doesn’t work because you lose important information. The carver slices and cuts photos to give you the image elements you want in the size you want them. It’s probably a good idea to read through the tutorial before jumping into the open-source code on GitHub.

Globs Design

Globs Design uses toggles and drag and drop to help you create funky shapes and fills that you can save in SVG format for projects.

Root Illustrations

Root Illustrations is a stylish set of people-based illustrations that you can customize to create scenes for your projects. Construct a scene and then snag your set of vector graphics that also work with Sketch and Figma. The set includes 24 characters, more than 100 details, and the ability to change colors and styles.

Make Your Photo 16×9

Make Your Photo 16×9 is as simple as it sounds. It is a cropping tool that allows you to upload any shape of photo – even vertical – and pick options to fill the space to make it fit the standard 16×9 aspect ratio.

6 Dev Tools

Devbook

Devbook is a search engine for developers that helps them to find the resources they need and answer their questions faster. Fast, accessible right from a code editor, and fully controllable with just a keyboard.

Madosel

Madosel is a fast, advanced responsive HTML front-end framework that’s in an alpha version. The open-source tool is made to create websites and apps that look great on any device. Plus, it is semantic, readable, flexible, and customizable.

Say Hello to CSS Container Queries

Say Hello to CSS Container Queries helps solve a problem with media queries and smart stacking of elements. CSS Container Queries allow you to make a fluid component that adjusts based on the parent element and everything is independent of viewport width. This post takes you through everything you need to do to implement this yourself.

Frontend Toolkit

Frontend Toolkit is a customizable dashboard that you can use to keep up with recurring tasks. It’s one of those little tools that can speed up workflows.

Flatfile

Flatfile is a production-ready importer for SaaS applications. It allows you to auto-format customer spreadsheets without manual cleaning of data and you can do it all without a CSV parser. The tool also includes an elegant UI component to guide users through the process.

Plasmic

Plasmic is a visual website builder that works with your codebase. It’s designed to speed up development with developers focusing on code (not pixel pushing) and allows non-developers to publish pages and content. The premium tool works with any hosting, CMS, or framework and you can adapt it by the component, section, or page.

2 Productivity Tools

Calendso

Calendso is an open-source calendar scheduling tool. It’s flexible with the ability to host it yourself or with the makers of the calendar. It is API-driven and allows you to control events and information. The interface is simple and sleek and can integrate into your website.

Slidev

Slidev is a set of presentation slides for developers. What’s different about this presentation deck is that you can write slides in a single markdown file with themes, code blocks, and interactive components.

4 Icons and UI Kits

Iconic

Iconic is a set of pixel-perfect icons that gets updated each week. The collection of 24×24 px elements in SVG format contains 160 icons and counting. The simple style is easy to implement and you can search for just what you need by category.

5 Dashboard Templates for Figma

5 Dashboard Templates for Figma is a set of free ready-made screens with light and dark modes for each that you can use with components such as calendars, charts, tables, and more. The free elements are a preview of a larger premium Figma set if you like how they look and work.

Free Mobile Chat UI Kit

Free Mobile Chat UI Kit is a tool of components for Sketch, Figma, and Adobe XD that includes more than 50 messaging screens with light and dark modes.

Stratum UI Design Kit

Stratum UI Design Kit is a collection of more than 9,000 consistent elements for Figma. It’s packed with elements and tools that make this premium UI kit a tool that gets projects moving quickly.

4 Type Tools and Fresh Fonts

Fluid Typography

Fluid Typography is a nifty tool that allows you to test headings in any size at different viewports to ensure it looks great everywhere. Then you can copy the CSS and use it in your projects.

Eighty-Eight

Eighty-Eight is a funky block-style typeface for display use.

Harmonique

Harmonique is a robust typeface family with lovely serifs and alternates. It’s a type family of two styles that work in harmony together to add distinction and personality to your own typographic compositions. Harmonique’s low contrast forms have the appeal of a humanist sans serif typeface.

Sketchup

Sketchup is a charming display typeface that has a nice pen style. The free version has a limited character set.

Just for Fun

Generating and Solving Sudokus in CSS

Generating and Solving Sudokus in CSS by Lee Meyer for CSS-Tricks is a fun deep dive into using CSS for something you might not expect. It’s a complicated – but fun – look at some of the things CSS can do with plenty of code snippets. The final result is a solvable puzzle with 16 squares.

Source

The post 26 Exciting New Tools For Designers, May 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Popular Design News of the Week: May 3 2021 – May 9, 2021

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

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

White House Launches AI Website

Become A Better Frontend Developer

Hello Weather

Sprint UI Design System Generator

How Pixar Uses Hyper-Colors to Hack Your Brain

Bootstrap 5

Microsoft’s New Font: Your Work Will Soon Take On A New Character

HTML Tips

Everything You Need to Know About UX Writing In Web Design

3 Essential Design Trends, May 2021

Source

The post Popular Design News of the Week: May 3 2021 – May 9, 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

3 Essential Design Trends, May 2021

Spring and fresh designs are in the air. This month, it’s obvious that designers are feeling creative with new and interesting concepts that range from a new style for cards, homepage experimentation with multiple entry points or calls to action, and risky typography options.

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

1. “Flat” Cards

Card-style design elements that allow users to click through to other content aren’t new, but the design of these cards is fresh and interesting.

Rather than more heavily designed cards with shadows and layers of content, flat styles are trending. Expect this trend to explode thanks to usage by Google for a shopping experience page.

The Google example below is interesting because Google’s Material Design guidelines are what helped card-style elements grow in popularity previously. However, those cards did include more layers, color options, buttons inside the cards, and shadows.

Today’s trending cards are completely flat. And beautiful.

Each of these websites does it in a slightly different way.

Heartcore, a consumer technology VC company, uses a series of flat cards as a navigation element to help users find their way through the website. Each features a bright color background with an illustration and a simple text block.

Each card has a nice hover state where only the illustration zooms inside the card frame. This is an interesting effect because it is exactly the opposite of the previous iteration of cards, which zoomed the entire card as a hover state.

Google Shopping uses that whole card bounce hover state (plus a not-so-flat shadow) for each card. The initial design is sleek with the pairing of white and image cards with simple text in each. You are enticed to click around to see what happens.

Click on Greece is a travel website design that uses simple cards with a minimal color and text overlay. The consistency of these cards makes the design pop and the beauty of the images draw you in. Each card also has a hover state with a darker color mask to guide navigation and make text elements easier to read.

2. Multiple Homepage Entry Points

For a long time, designers have been working off the philosophy that the homepage should have one direct entry point, creating a direct funnel for the user experience.

These designs throw that idea out the window, with multiple entry points and click elements.

You can think of it as the “create your own adventure” option for these designs.

It can be a risky concept if you are diving into analytics to pay attention to user paths. You want to make sure you know what choices users are making so that you can help them on the journey to the content and information that you want them to get from the visit.

But this type of design scheme does feel somewhat personalized, putting the user in more control.

Parcouse Epicuriens uses three flat card-style elements to help users pick what they want to see from the home page. There’s no other button or direct call to action, which is somewhat uncommon in today’s website design landscape. Users have to pick from one of the cards, scroll, or enter using the hamburger menu icon.

Tasty Find uses search options to help users start their journey. What’s interesting here are the choices – search for the food you want, pick something random, or (in the small print) find even more options. Users get three choices to begin their journey with the website.

What’s interesting is how simple this complex user journey looks. The design is easy to digest, but so many options could overwhelm users. This is one of those situations where you have to watch return search data and information and weigh the risk versus the reward of so much choice. It’ll be interesting to watch this design over time and see if the options decrease in number.

Accord also has several levels of user engagement opportunity. Option 1: Every block contains a click element. Option 2: Use the search at the top to narrow choices. This is an interesting configuration as the homepage for an e-commerce website because they get right to product selection and shopping without a softer sell or introduction.

3. Risky Typography

Typographic risk has been an ongoing theme for a little while. Designers are embracing experimental and novelty typefaces to stand out in the cluttered website space. Sometimes it works beautifully, and other times, it can fall short.

Here, each of these trending website designs uses a risky typography treatment. The risks are a little different for each design, from readability to comprehension to font delivery.

How Many Plants has duel typography risks: A funky typeface paired with odd word breaks. Interestingly enough, readability isn’t as big of a concern as you might think. This is likely because there aren’t many words, and they are short. Plus, the imagery ties in nicely.

Do you notice a similarity between How Many Plants and The Great Lake? The typography has the same style with a blocky, slab, sans serif with alternating thick and thin strokes. (It’s the same font.)

The risk in the typography design for The Great Lake isn’t in the homepage display, although you might wonder what the design is about. It is carrying this font throughout the design. While it looks great large and with only a few words, it gets a little more difficult the more you see it. This type of mental reading weight can be difficult for visitors over time, creating an element of risk.

Zmaslo uses an interesting typeface with a liquid effect on top of an unusual word. That combination of text elements makes you think hard to read the homepage, despite its neat looks. The risk here is weighing visual interest against comprehension. Depending on the audience, this risk can be worth the chance.

Conclusion

Spring always seems to be that time of year where designers start thinking about new, fresh design elements. That might explain some of the “riskier” design choices and experimentation here.

Regardless of the motivation, it is always fun to see the creative stretch happen. It can be even more interesting to see what elements from these trends continue to grow in the coming months.

Source

The post 3 Essential Design Trends, May 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Popular Design News of the Week: April 26, 2021 – May 2, 2021

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

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

Curated List Of Awesome Lists

20 Best New Websites, April 2021

I Studied The Fonts Of The Top 1000 Websites; Here’s What I Learned

Markdown To Slideshow

WordPress Checklist: 17 Steps to Launching Your Site

Understanding Easing Functions For CSS Animations And Transitions

This is Tech! Illustrations About Technical Processes

This Amazing AI Tool Lets You Create Human Faces From Scratch

When You Shouldn’t Display Radio Buttons in a List Format

Lightweight, Privacy-First, Open-Source Comment System

8 Stunning Examples of CSS Glassmorphism Effects

CSS Tips

Source

The post Popular Design News of the Week: April 26, 2021 – May 2, 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Popular Design News Of The Week: April 19, 2021 – April 25, 2021

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

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

Coca-Cola Presents New Packaging Design

Seven Mistakes To Avoid In Your Technical Interviews

10 Interesting Ways to Plan Web Design Projects

Web Developer’s Guide To AVIF Images

 

3 Effective Ways To Improve Your Site’s Carbon Footprint

Pure CSS Before & After Image Slider

Blank

25 Exciting New Tools For Designers, April 2021

Text In A Circle Using CSS & JavaScript

A to Z of Adobe XD: Tips & Tricks!

Content-Aware Image Resizing In JavaScript

Remove Distractions and Waste from Your Website

Top 18 Best Practices for Writing Super Readable Code

Atriom

Source

The post Popular Design News Of The Week: April 19, 2021 – April 25, 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

No-Code:  »It’s a Trap! »

Gartner predicts that by 2023, over 50% of medium to large enterprises will have adopted a Low-code/No-code application as part of their platform development.
The proliferation of Low-code/No-code tooling can be partially attributed to the COVID-19 pandemic, which has put pressure on businesses around the world to rapidly implement digital solutions. However, adoption of these tools — while indeed accelerated by the pandemic — would have occurred either way.
Even before the pandemic, the largest, richest companies had already formed an oligopsony around the best tech talent and most advanced development tools. Low-Code/No-code, therefore, is an attractive solution for small and mid-sized organizations to level the playing field, and it does so by giving these smaller players the power to do more with their existing resources.
While these benefits are often realized in the short term, the long-term effect of these tools is often shockingly different. The promise of faster and cheaper delivery is the catch — or lure — inside this organizational mousetrap, whereas backlogs, vendor contracts, technical debts, and constant updates are the hammer.
So, what exactly is the No-Code trap, and how can we avoid it?

What is a No-Code Tool?

First, let’s make sure we clear up any confusion regarding naming. So far I have referred Low-Code and No-Code as if they were one term. It’s certainly easy to confuse them — even large analyst firms seem to have a hard time differentiating between the two — and in the broader context of this article, both can lead to the same set of development pitfalls.
Under the magnifying glass, however, there are lots of small details and capabilities that differentiate Low-code and No-code solutions. Most of them aren’t apparent at the UI level, leading to much of the confusion between where the two come from.
In this section, I will spend a little bit of time exploring the important differences between those two, but only to show that when it comes to the central premise of this article they are virtually equivalent.

Low-Code vs. No-Code Tools

The goal behind Low-Code is to minimize the amount of coding necessary for complex tasks through a visual interface (such as Drag ‘N’ Drop) that integrates existing blocks of code into a workflow.
Skilled professionals have the potential to work smarter and faster with Low-Code tools because repetitive coding or duplicating work is streamlined. Through this, they can spend less time on the 80% of work that builds the foundation and focuses more on optimizing the 20% that makes it different. It, therefore, takes on the role of an entry-level employee doing the grunt work for more senior developers/engineers.
No-Code has a very similar look and feel to Low-Code, but is different in one very important dimension. Where Low-Code is meant to optimize the productivity of developers or engineers that already know how to code (even if just a little), No-Code is built for business and product managers that may not know any actual programming languages. It is meant to equip non-technical workers with the tools they need to create applications without formal development training.
No-Code applications need to be self-contained and everything the No-Code vendor thinks the user may need is already built into the tool.
As a result, No-Code applications create a lot of restrictions for the long-term in exchange for quick results in the short-term. This is a great example of a ‘deliberate-prudent’ scenario in the context of the Technical Debt Quadrant, but more on this later.

Advantages of No-Code Solutions

The appeal of both Low-Code and No-Code is pretty obvious. By removing code organizations can remove those that write it — developers — because they are expensive, in short supply, and fundamentally don’t produce things quickly.
The benefits of these two forms of applications in their best forms can be pretty substantial:
  • Resources: Human Capital is becoming increasingly scarce — and therefore expensive. This can stop a lot of ambitious projects dead in their tracks. Low-Code and No-Code tools minimize the amount of specialized technical skills needed to get an application of the ground, which means things can get done more quickly and at a lower cost.
  • Low Risk/High ROISecurity processes, data integrations, and cross-platform support are all built into Low-Code and No-Code tools, meaning less risk and more time to focus on your business goals.
  • Moving to Production: Similarly, for both types of tools a single click is all it takes to send or deploy a model or application you built to production.
Looking at these advantages, it is no wonder that both Low-Code and No-Code have been taking industries by storm recently. While being distinctly different in terms of users, they serve the same goal — that is to say, faster, safer and cheaper deployment. Given these similarities, both terms will be grouped together under the ‘No-Code’ term for the rest of this article unless otherwise specified.

List of No-Code Data Tools

So far, we have covered the applications of No-Code in a very general way, but for the rest of this article, I would like to focus on data modeling. No-Code tools are prevalent in software development, but have also, in particular, started to take hold in this space, and some applications even claim to be an alternative to SQL and other querying languages (crazy, right?!). My reasons for focusing on this are two-fold: 
Firstly, there is a lot of existing analysis around this problem for software development and very little for data modeling. Secondly, this is also the area in which I have the most expertise.
Now let’s take a look at some of the vendors that provide No-Code solutions in this space. These in no way constitute a complete list and are, for the most part, not exclusively built for data modeling. 

1. No-Code Data Modeling in Power BI

Power BI was created by Microsoft and aims to provide interactive visualizations and business intelligence capabilities to all types of business users. Their simple interface is meant to allow end-users to create their own reports and dashboards through a number of features, including data mapping, transformation, and visualization through dashboards. Power BI does support some R coding capabilities for visualization, but when it comes to data modeling, it is a true No-Code tool.

2. Alteryx as a Low-Code Alternative

Alteryx is meant to make advanced analytics accessible to any data worker. To achieve this, it offers several data analytics solutions. Alteryx specializes in self-service analytics with an intuitive UI. Their offerings can be used as Extract, Transform, Load (ETL) Tools within their own framework. Alteryx allows data workers to organize their data pipelines through their custom features and SQL code blocks. As such, they are easily identified as a Low-Code solution.

3. Is Tableau a No-Code Data Modeling Solution?

Tableau is a visual analytics platform and a direct competitor to Power BI. They were recently acquired by Salesforce which is now hoping to ‘transform the way we use data to solve problems—empowering people and organizations to make the most of their data.’ It is also a pretty obvious No-Code platform that is supposed to appeal to all types of end-users. As of now, it offers fewer tools for data modeling than Power BI, but that is likely to change in the future.

4. Looker is a No-Code Alternative to SQL

Looker is a business intelligence software and big data analytics platform that promises to help you explore, analyze, and share real-time business analytics easily. Very much in line with Tableau and Power BI, it aims to make non-technical end-users proficient in a variety of data tasks such as transformation, modeling, and visualization.

You might be wondering why I am including so many BI/Visualization platforms when talking about potential alternatives to SQL. After all, these tools are only set up to address an organization’s reporting needs, which constitute only one of the use cases for data queries and SQL. This is certainly a valid point, so allow me to clarify my reasoning a bit more.

While it is true that reporting is only one of many potential uses for SQL, it is nevertheless an extremely important one. There is a good reason why there are so many No-Code BI tools in the market—to address heightening demand from enterprises around the world — and therefore, it is worth taking a closer look at their almost inevitable shortcomings.

Source de l’article sur DZONE

3 Effective Ways To Improve Your Site’s Carbon Footprint

At the dawn of the web-era, there was much focus on how environmentally friendly websites were: we’d chop down fewer trees, ship fewer products, and travel less for business.

And because the web was small, any negative impact it had was relatively small. But the Internet’s no longer small, and neither is the impact it has on the environment. The average website uses 211,000g of CO2 per year, watching a video online outputs an estimated 0.2g of CO2 per second, and a single email can cost 50g of CO2.

In the next four years, the tech industry as a whole may use up to 20% of the world’s electricity and be responsible for 5.5% of global CO2 emissions.

The good news is that because websites are viewed many times, even small improvements can multiply into real change.

1. Reduce Energy Consumption

Through electricity use, the Internet generates around the same CO2 as most major countries. That carbon comes from two sources: the devices we use to access the Internet and the servers that host our data.

Computers heat up, and when they heat up, they slow down. Servers are especially vulnerable and use extraordinary amounts of energy to keep cool and functional, which is why Microsoft keeps throwing servers into the sea.

Make It Faster

The faster your site, the less data is used to serve it, and the less carbon it’s outputting; it’s that simple.

Reduce the Number of Resources Used

Everything you load on your site has an impact. You might think that a tiny PNG is too small to really impact your carbon footprint, but over thousands of page loads, its impact is multiplied. Anything you can do to reduce the number of actual files requested will reduce your carbon output. You can use sites like Ecograder to estimate your own site’s CO2 output.

Optimize Images

If there’s one thing you can do to reduce the size of your site, the amount of data that needs to be sent over the Internet to serve your site, and the resulting speed, it’s optimizing your images.

Nothing reduces a site’s footprint like optimizing images. It’s easy and free to reduce the size of JPGs and PNGs with a service like TinyPNG. Offer WebP to any browser that will accept them; it will boost your Lighthouse score and improve your CO2 usage.

Lazy Load Images

Lazy loading images means images are loaded as they are required; images at the top of a page always load, images further down only load when the user scrolls to them; if the user doesn’t scroll to the bottom of the page, they don’t load, saving you CO2.

Reduce The Amount Of JavaScript You Use

Yes, JavaScript is awesome. Yes, it can be hugely beneficial to UX. And yes, it munches on energy like it’s candy.

When a web page loads, it’s done, the total cost is in. If JavaScript keeps running in the background, redrawing the screen based on user interaction — as is the case with a parallax site — the web page keeps using up energy on the device.

Choose a Sustainable Hosting Company

You can reduce the power needs of a site, but you can’t eliminate them. One simple step is to opt for a hosting company that gets its electricity from sustainable sources such as wind power or solar.

Low←Tech Magazine is powered by a server that runs on solar energy and carries a warning that it may go offline. But it’s possible to host both reliably and sustainably. Many web hosts outsource their actual server management, so they have no control over how those servers are powered, but there are plenty of exceptions that guarantee green web hosting. Google Cloud aims to be the cleanest in the cloud industry. For green web hosting, I always recommend the all-round superb Kualo.

2. Be Inclusive

One of the biggest issues with the EV (Electric Vehicle) movement is that we’re replacing cars earlier than we normally would in a rush to move to “clean” driving.

A new EV certainly outputs less than a gas-powered vehicle when driven the same distance. Combine increased use — because owners think they are driving cleanly — with the fact that a new EV has to be manufactured, the minerals for batteries have to be mined (in horrific conditions), and it then needs to be shipped to you, and EVs are not as friendly as they appear — so go ahead, buy that vintage Porsche it’s probably better for the environment than a Tesla.

Support Legacy Devices

The same issue that applies to cars applies to devices. Every time we rush ahead to support the latest iPhone, we leave older generations behind. A device can and should last longer than two years.

This is not to say that you shouldn’t embrace modern web standards. Technologies like CSS Grid are excellent at reducing markup size and speeding up sites. CSS Grid has been well supported for over four years, and even “legacy” devices can handle it. If you can keep a phone for an extra six months, the environmental cost of that phone is reduced by 20%.

3. Help Users Make Good Choices

More and more people are trying to make good choices. We’re eating a healthier, balanced diet. We’re recycling clothes. We’re traveling by bike, and on foot, instead of by car. People want to do the right thing, and they seek out companies that aid them.

Improve Navigation

Anything that you can do to make your content more findable will mean fewer page loads and therefore consume fewer resources.

By improving your information architecture, improving your search accuracy, and improving on-page signposts like bread crumbs and link text, you help users find content faster.

Feelgood Feedback

When the environmental impact of a user’s actions are quantifiable, let them know. Users who care will appreciate it, and users who don’t will ignore it.

Raileurope.com adds a note to any quotation letting you know how much carbon you’ve saved by traveling by train instead of flying.

Don’t Remove the Shipping Rate

Many ecommerce sites offer free shipping, especially above a certain order value; it’s a good way to encourage higher sales. But absorbing the shipping cost implies that there is no shipping. By highlighting the shipping costs, even if they’re not passed on to the customer, you remind them that there is an environmental cost and a financial cost.

You can absorb the shipping rate without implying there is no cost by adding the shipping and then explicitly deducting it as a discount.

Sustainable Web Design Is Good For Business

The fundamentals of good web design are the fundamentals of sustainable web design.

Make it fast and usable, and you’ll also be making it energy efficient. Make it inclusive, and you’ll help the industry slow the ever-growing tendency to consume. Make it transparent, and you’ll help your users make good choices of their own. All of these things are not only good for the environment, but they also result in improved UX and SEO.

 

Featured image via Pexels.

Source

The post 3 Effective Ways To Improve Your Site’s Carbon Footprint first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

What Is The Independent Web And Does It Matter In 2021?

Ten years ago, people began talking about the “Independent Web.” Although we don’t commonly use the term anymore, that doesn’t mean that it’s not still as vital a topic of discussion today as it was a decade ago.

Today, I want to look at where the term came from, what it refers to today, and why it’s something that all of us in business, marketing, and web design should be thinking about.

What Is The Independent Web?

The Independent Web is a term that was coined back in 2010 by John Battelle.

In “Identity and The Independent Web,” Battelle broaches the subject of internet users losing control of their data, privacy, and decision-making to the likes of social media and search engines.

“When we’re ‘on’ Facebook, Google, or Twitter, we’re plugged into an infrastructure that locks onto us, serving us content and commerce in an automated but increasingly sophisticated fashion. Sure, we navigate around, in control of our experience, but the fact is, the choices provided to us as we navigate are increasingly driven by algorithms modeled on the service’s understanding of our identity.”

That’s the Dependent Web.

This is how Battelle explains the Independent Web:

“There is another part of the web, one where I can stroll a bit more at my own pace, and discover new territory, rather than have territory matched to a presumed identity. And that is the land of the Independent Web.”

In 2010, this referred to websites, search engines, and apps where users and their activity were not tracked. But a lot has changed since then, and many websites that were once safe to peruse without interference or manipulation are no longer.

What Happens When the Dependent Web Takes Over?

Nothing good.

I take that back. It’s not fair to make a blanket statement about Dependent Web platforms and sites. Users can certainly benefit from sharing some of their data with them.

Take Facebook, for instance. Since its creation, it’s enabled people to connect with long-lost friends, stay in touch with distant relatives, enable freelance professionals like ourselves to find like-minded communities, etc.

The same goes for websites and apps that track and use visitor data. Consumers are more than willing to share relevant data with companies so long as they benefit from the resulting personalized experiences.

But the Dependent Web also has a darker side. There are many ways that the Dependent Web costs consumers and businesses control over important things like:

Behavior

If you’ve seen The Social Dilemma, then you know that platforms like Facebook and Google profit from selling their users to advertisers.

That’s right. They’re not just selling user data. They’re selling users themselves. If the algorithms can change the way users behave, these platforms and their advertisers get to cash in big time.

Many websites and apps are also guilty of using manipulation to force users to behave how they want them to.

Personal Data

This one is well-known thanks to the GDPR in the EU and the CCPA in California. Despite these initiatives to protect user data and privacy, the exploitation of personal data on the web remains a huge public concern in recent years.

Content and Branding

This isn’t relevant to websites so much as it is to social media platforms and Google.

Dependent Web platforms ultimately dictate who sees your content and when. And while they’re more than happy to benefit from the traffic and engagement this content brings to their platforms, they’re just as happy to censor or pull down content as they please, just as Skillshare did in 2019 when it deleted half of its courses without telling its course creators.

What’s more, while social media and search engines have become the place to market our businesses, some of our branding gets lost when entering such oversaturated environments.

Income

When algorithms get updated, many businesses often feel the negative effects almost immediately.

For example, Facebook updated its algorithm in 2018 to prioritize “meaningful content.” This pushed out organic business content and pulled regular user content to the top of the heap.

This, in turn, forced businesses to have to pay-to-play if they wanted to use Facebook as a viable marketing platform.

Access

The Dependent Web doesn’t just impact individuals’ experiences. It can have far-reaching effects when one company provides a critical service to a large portion of the population.

We saw this happen in November when AWS went down.

It wasn’t just Amazon’s servers that went down, though. It took out apps and sites like:

  • 1Password
  • Adobe Spark
  • Capital Gazette
  • Coinbase
  • Glassdoor
  • Roku
  • The Washington Post

And there’s absolutely nothing that these businesses or their users could do but sit around and wait… because Amazon hosts a substantial portion of the web.

Innovation

When consumers and businesses become dependent on platforms that predominantly control the way we live and work, it’s difficult for us to stand up for the little guys trying to carve out innovative pathways.

And that’s exactly what we see happen time and time again with Big Tech’s buy-and-kill tactics.

As a result, we really lose the option to choose what we use to improve our lives and our businesses. And innovative thinkers lose the ability to bring much-needed changes to the world because Big Tech wants to own the vast majority of data and users.

How Can We Take Back Control From The Dependent Web?

Many things are happening right now that are trying to push consumers and businesses towards a more Independent Web:

Consumer Privacy Protection: GDPR and CCPA empower consumers to control where their data goes and what it’s used for.

Big Tech Regulations: The Senate held tech regulation hearings with Facebook’s and Twitters’s CEOs.

Public Awareness Initiatives: Films like The Social Dilemma bring greater awareness to what’s happening on social media.

Ad Blocker Adoption: Adblocker usage is at an all-time high.

Private Search Engine Usage: Although Google dominates search engine market share, people are starting to use private search engines like Duck Duck Go.

Private Browsing Growth: Over 60% of the global population is aware of what private browsing is (i.e., incognito mode), and roughly 35% use it when surfing the web.

Self-hosted and Open Source CMS Popularity: The IndieWeb community encourages people to move away from Dependent platforms and build their own websites and communities. This is something that Matt Mullenweg, the founder of WordPress, talked about back in 2012.

“The Internet needs a strong, independent platform for those of us who don’t want to be at the mercy of someone else’s domain. I like to think that if we didn’t create WordPress something else that looks a lot like it would exist. I think Open Source is kind of like our Bill of Rights. It’s our Constitution. If we’re not true to that, nothing else matters.”

As web designers, this is something that should really speak to you, especially if you’ve ever met a lead or client who didn’t understand why they needed a website when they could just advertise on Facebook or Instagram.

A Decentralized Web: Perhaps the most promising of all these initiatives are Solid and Inrupt, which were launched in 2018 by the creator of the Web, Tim Berners-Lee.

As Berners-Lee explained on the Inrupt blog in 2020:

”The Web was always meant to be a platform for creativity, collaboration, and free invention — but that’s not what we are seeing today. Today, business transformation is hampered by different parts of one’s life being managed by different silos, each of which looks after one vertical slice of life, but where the users and teams can’t get the insight from connecting that data. Meanwhile, that data is exploited by the silo in question, leading to increasing, very reasonable, public skepticism about how personal data is being misused. That in turn has led to increasingly complex data regulations.”

This is something we should all keep a close eye on. Consumers and businesses alike are becoming wary of the Dependent Web.

Who better than the creator of the web to lead us towards the Independent Web where we can protect our data and better control our experience?

 

Featured Image via Pexels.

Source

The post What Is The Independent Web And Does It Matter In 2021? first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

25 Exciting New Tools For Designers, April 2021

Rather than spring cleaning, do some spring “shopping” for tools that will make your design life easier. Packed with free options this month, this list is crammed full of tools and elements that you can use in your work every day.

Here’s what new for designers this month:

April’s Top Picks

Charts.css

Charts.css makes creating beautiful online charts that much easier. It’s a modern CSS framework that uses CSS utility classes to style HTML elements as charts. It’s accessible, customizable, responsive, and open source. There’s a quick start option and available source code to work with.

Haikei SVG Generator

Haikei is a web app that helps you generate SVG shapes, backgrounds, and patterns in all types of shapes to use in projects. Everything can be exported into the tools you are already using for easy integration, and every element is customizable. The tool is free right now – no credit card needed – and you get access to 15 generators and can export in SVG and PNG format. A premium option is on the way, and you can sign up to get notified for access.

Fluid Space Calculator

Fluid Space Calculator helps you create a related space system and export the CSS to implement it. The calculator allows you to add space value pairs and multipliers and see the impact on the screen before snagging the related code. It’s great for determining how things will look in different viewports and for creating custom space pairs.

Night Eye WordPress Plugin

Night Eye WordPress Plugin helps you create a dark mode option for your WordPress website with ease. It’s completely customizable, schedulable, and one of those things that users are starting to expect. The plugin has free and paid versions – the only difference is a link to credit the developer.

3 Productivity Boosters

Macro

Macro is a supercharged checklist app for recurring processes. It’s designed to help teams document, assign, track, and automate for maximum efficiency. Now is the time to test this tool because it is free in public beta.

Writex.io

Writex.io is a free writing app that uses AI and smart features to help you write more efficiently. It can check readability as you write, make suggestions, check spelling, and allows you to work with versioning. All the settings are customizable, so you can get help and suggestions when you want them and avoid things you don’t want.

Taloflow

Taloflow, which is in beta, is a tool that helps you find the top cloud and dev tools for your use case. This is designed to be a time-saving solution to finding the right infrastructure and API products for your work.

8 Kits with Illustrations and User Interface Elements

Skribbl

Skribbl is a collection of free, hand-drawn illustrations in a light and fun style. The black and white sketches are friendly, and the collection keeps growing. Plus, the illustrators are allowing them to be used free for any use.

Mobile Chat Kit

Mobile Chat Kit is a free starter kit for building apps in Figma, Sketch, and Adobe XD. It includes more than 50 screen options with mapped-out flows for a quick-start project.

Flowchart.fun

Flowchart.fun is exactly what the name implies. The app allows you to type, create nodes, and link elements to develop simple flow charts quickly. Then you can alter shape and size with drag and drop. Export it for use as an SVG, JPG, or PNG.

Shuffle

Shuffle is a marketplace packed with UI libraries to help you with a variety of digital projects. There are more than 1,500 pre-built components to choose from with professional designs. This premium tool comes with a monthly subscription or lifetime license.

Cryptocurrency 3D Pack

Cryptocurrency 3D Pack is a set of icons with fun colors in three-dimensional shapes that you can use to represent different crypto elements. The pack includes 55 #D icons in PNG and BLEND formats.

Stratum UI Kit for Figma

Stratum UI Kit for Figma includes nine free screens that are ready to use. Options include API documentation, Kanban, document, data dashboard, ecommerce product list, ecommerce product options, payments spreadsheet, cloud storage, and newsfeed.

Conic.css

Conic.css is a collection of simple gradients that you can browse and then click to copy the code into your CSS to use them in projects. It’s quick and easy while using trendy color options.

Artify Illustrations

Artify Illustrations is a Figma plugin that allows you to access more than 5,000 SVG and PNG illustrations within the app. It’s got a built-in search feature, everything is high-resolution, and the huge library includes various styles.

2 Tutorials

A Complete Guide to Accessible Front-End Components

A Complete Guide to Accessible Front-End Components is an amazingly comprehensive guide from Smashing Magazine with everything you need to know about accessible components. From tabs to tables to toggles to tooltips, you’ll find it all here and learn how to use it the right way.

Grid CheatSheet in 2021

Grid CheatSheet in 2021 is a useful guide of everything you can do with CSS Grid. Plus, it has plenty of fun illustrations and an accompanying video.

8 Fresh and Fun Fonts

Athina

Athina is a modern display serif with beautiful connector strokes. The free version is a demo, and there’s a full family that you can buy.

Brique

Brique is a free (personal and commercial) display font with a wide stance and uppercase character set. The letters have a lot of personality and a readable configuration.

Code Next

Code Next is a great geometric sans serif with a full family of styles. Including two variable fonts. It’s highly readable and would work for almost any application.

Inter

Inter is a simple and functional sense serif family with everything from extra light to heavy weights. The extra character personality makes this a fun and functional font option.

Nothing Clean

Nothing Clean is a fun grunge-type option. It’s an all uppercase character set with alternates.

Playout

Playout is a fun, hand-drawn style typeface with interesting glyphs and alternate characters. The most fun feature might be the pawprint characters in the demo set.

Rockford Sans

Rockford Sans is a geometric typeface with subtly rounded edges. It has eight weights and italics. With its large x-height and round features, it’s legible and friendly. It’s suited to cover a wide variety of tasks from editorial to brand design and advertising.

SpaceType

SpaceType is a fun and funky typeface in regular and expanded styles. The stretched letterforms make interesting alternates for display purposes.

Source

The post 25 Exciting New Tools For Designers, April 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot