How To Use Heatmaps To Track Clicks On Your WordPress Website

Original Source: https://www.smashingmagazine.com/2018/03/heatmaps-track-links-wordpress/

There are lots of ways to measure the performance of a web page and the most popular one is by far Google Analytics. But knowing exactly what images, words, or elements on your site catch your site visitor’s specific attention is not possible with these tools alone.

Sometimes, you simply want to know what makes your page great in terms of design, layout, content structure (you name it) and what prompts people to take one intentional action instead of another. You will be probably surprised to learn that there’s actually a solution to your question: heatmaps.

Unlike Google Analytics, which works with numbers and statistics, the heatmaps show you the exact spots that receive the most engagement on a given page. Through heatmaps, you will know what are the most clicked areas on a page, what paragraphs people select while scanning your content, and what is the scrolling behavior of your clients (e.g., how many went below the fold or how many reached the bottom of the page).

In this article, we will talk about why heatmaps are so efficient for your marketing goals and how they can be integrated with your WordPress site.

Why Use Heatmaps On Your WordPress Site

Before progressing to the “how to” part, you might want to know why it’s worth it to dedicate valuable time on implementing heatmaps for your WordPress site and what their actual role is.

First off, visual marketing is constantly growing as many more people now respond positively to a modern and user-friendly interface and skip a plain, non-interactive one. If a certain action requires too many steps and a hard to maneuver platform, they eventually give up, and you lose clients.

Getting the process just right ain’t an easy task. That’s why we’ve set up ‘this-is-how-I-work’-sessions — with smart cookies sharing what works really well for them. A part of the Smashing Membership, of course.

Explore features →

Smashing TV, with live sessions for professional designers and developers.

Of course, great content is still the key, but the way your site is structured and combines various elements will influence the activity of your visitors, which is either convert (engage) or leave.

Marketing experts researched this kind of behavior over time:

37% of marketers think visual marketing is the most important form of content for their business, second only to blogging (38%);

51% of B2B marketers prioritized creating visual content assets in 2016;

38% of people will stop engaging with a website if the content/layout is unattractive.

But what were heatmaps built for specifically? A heatmap can help you discover valuable and, sometimes, surprising facts about your audience.

If you add one to your WordPress site, you can:

Track your visitors’ clicks and become aware of their expectations while browsing through your site. This way, you can adjust your pages and make them catchier and more compelling.

Find out what is of interest for people. You’ll know what information they are looking for, so you can put it in the spotlight and use it to your favor.

Analyze the scrolling behavior. See how many visitors reached the bottom area of the site and how many left immediately without browsing further through the sections.

Keep an eye on the cursor movement and see what pieces of content your audience is hovering over (or selecting) in a text.

Scrolling behavior heatmap

Scrolling behavior heatmap

Again, using heatmaps is not only about tracking clicks for fun, it can have many implications for your business’ growth. They can influence purchases or conversions of any kind (it depends on what you want to achieve with your site).

You will know if your call-to-action buttons get the attention you intended, compared to other elements on the same page. Maybe other design elements you placed on your sales page distract people from clicking the buy button, and this can be seen on the hot spots map. Based on the results, you can change the way they look, their position, their styling, etc., hence sales increase.

Bloggers can also use the heatmaps because this way they will know how to create customer-friendly, appealing layouts for their content. Some layouts generate more traffic than others, and it’s up to you to find out which ones.

If people linger on a certain piece of information, it means it’s valuable for them, and you can use it to your favor by placing a link or a button nearby. Or you can simply create a separate post with even more information on that topic.

How To Add A Heatmap To Your WordPress Site

No matter if we are talking about plugins originally made for WordPress or third-party tools, the integration is not difficult at all. Usually, the most difficult part about heatmaps is the interpretation of the results — the conclusions along with the implications they have on your business and how to use them to your advantage.

When it comes to installing them, you just need to choose one tool and start the tests. Crazy Egg, Heatmap for WordPress, Hotjar Connecticator, Lucky Orange, and SeeVolution are the best and most popular tools that will help you in this direction. Heatmap for WordPress and Hotjar are free, while the other three come in premium plans (they offer free trials, though).

It’s important to mention that all these tools (except for Heatmap for WordPress) work with other website builders as well, not only WordPress. They are universal; it’s just that the WordPress developers found an easy way to integrate them with the latter so that the non-coders won’t struggle much with it. To integrate them with any other website builder, such as Squarespace for instance, you need to play with the code a little bit.

So, how to set up the heatmaps on your site? Let’s use Hotjar because it does a good job overall. It is intuitive, modern, and quick to implement in WordPress.

In this case, let’s take Hotjar Connecticator plugin as an example. After installing and activating it, you need to create an account on hotjar.com, add the URL of the site you want to monitor (you can add more sites later), and copy the provided tracking code to the plugin’s page in your WordPress dashboard (as seen below).

Now, it’s time to create the heatmap, which can be done right from the Hotjar platform (you can’t customize anything on your WordPress dashboard). So, click on Heatmaps, then New Heatmap.

Next, you need to choose your Page Targeting preferences. Do you want to track the hot spots on a single page? Do you test several pages at the same time to compare their results? That works too. If you need the latter, you have some URL formats available, so you can make sure you can target all the pages from a specific category (sorted by type, publishing date, etc.) You can even write the exact words that the links contain and Hotjar starts tracking the pages.

An interesting thing about Hotjar is that it lets you exclude page elements that you don’t want to monitor by adding their CSS selectors. This way, you can avoid being distracted by unneeded things when you compare or analyze the results and can focus only on the ones that you want to test.

After you create the heatmap, the first screenshot with the hot spots will be provided only after the page starts to get visitors and clicks, so don’t expect results right away. The tool tracks all the views you had on that page since the heatmap was created so that you can make reports based on the views and the number of clicks. This kind of reports let you know you how clickable (or not) your content is.

Here’s how the first screenshot provided by Hotjar looks (the testing was done on an uncustomized version of Hestia WordPress theme):

Another awesome thing about this tool is that it provides you the option to create simple and interactive polls to ask your users why they’re leaving your page or what were the things they didn’t enjoy about your page.

Case Study: How We Improved Landing Pages On ThemeIsle And CodeinWP With Heatmaps

The theory sounds captivating, and it’s almost always easier than the practice itself. But does this method really work? Is it efficient? Do you get pertinent results and insights at the end of the day?

The answer is: Yes, if you have patience.

We love heatmaps at ThemeIsle and use them on many of our pages. The pages are mostly related to WordPress themes since the company is an online shop that sells themes and plugins for this particular platform.

One of the most popular pieces of content from CodeinWP blog is related to themes as well. We have a large range of listings, and many of them rank in top three of Google results page. Lately, we have experimented with two types of layouts for the lists: one that has a single screenshot presenting the theme’s homepage and another providing three screenshots: homepage, single post page, and mobile display.

The main thing we noticed after comparing the two versions was that quite the same number of people reached to end of the list, but the clicks distribution was different: the listing with more visuals didn’t get as many clicks in the bottom half as the one with only one screenshot. This means that the list with more visuals is more explanatory because it offers more samples from the theme’s design, which helps people realize faster which ones are appealing to them. Given this fact, there’s no need for extra clicks to see how a theme looks.

In the one-screenshot case, people dig deeper to find more details about a theme, since there’s only the homepage that they can see from the picture. Hence, they will click more to get to the theme’s page and launch its live demo.

So, if you’re looking for advertising opportunities or you’re using affiliate links, the one-picture version will help you more in terms of user engagement and time spent on your site.

Another example of using heatmaps is Hestia theme’s documentation page. During the testing process, we noticed that a significant number of users are interested in upgrading to the premium version after seeing the number of clicks on the word “Upgrade”, which convinced us to move the upgrade button to a more obvious place and improve the destination page that contains the premium features of the theme.

Speaking of premium features, another experiment of ours was to track the cursor movement and see what are the features people are hovering over more when checking the documentation. Based on the results, we used the most popular items on many landing pages that were seeking conversion – which, in this case, was the upgrade to the premium theme by our free users.

We also created a heatmap for our FAQ page to track the less clicked questions, which we replaced subsequently with other relevant ones. The test is still in progress, as we are trying to improve our support services and offer the customers smoother experiences with our products.

The Importance Of A/B Testing

After getting great insights from the heatmaps, you don’t have to stop there. Create alternatives for your pages based on the results and use the A/B testing method to see which ones perform better.

A/B testing is probably the most popular method with which you can compare two or more versions of the same page. The end goal is to find out which one converts better. You should try it because it definitely helps you get closer to your goals and offers you a new perspective on how your content is being consumed by your audience.

So, after using heatmaps for a while and tracking the behavior of your users, start to make a plan on how to improve your site’s usability. Create alternatives, don’t stick with only one. If you have more than one idea, put them all to test and observe people’s reactions. The goal here is to create the most efficient landing page, the one that has the best chances to convert or to receive the expected engagement.

But how does A/B testing work?

Well, there are several plugins built to make this method work on your WordPress site, but Nelio A/B Testing is the most popular based on the reviews it has on WordPress.org directory (and it’s also free). After installing the plugin, you can choose the type of experiment you want to run. It has a large range of options to compare: pages, posts, headlines, widgets, and more.

Now, starting an experiment is really easy, it takes a few minutes. When you create it, you need to add the original page you want to run tests on, the alternative you want to compare it to, and the goal (what you are trying to achieve with the experiment: get page views, clicks, or direct people to an external source). After stopping the experiments, the plugin will show you detailed results that revolve around the goal you set in the first place. So, at the end of the test, you can tell which page performed better, and you can use it on your site… until a new idea comes to your mind and you should start testing again. Because digital marketing is not about assuming and hoping that things will happen, it’s about making things happen. That’s why you should always test, test, and test again.

By the way, with Nelio A/B Testing plugin, you can create heatmaps too, but they are not as sophisticated as the plugins listed earlier and don’t deliver as many insights. But you can try it out if you want to run quick experiments and need some basic information about a page.

Conclusion

If you want to have a successful business or to be the author of a bold project, keep adjusting your strategies. Try new things every day, every week. To be able to adjust, it’s not enough to simply know your audience but to also test its behavior and make the next moves based on that.

Marketing is not about guessing what your customers want; it’s about finding it yourself and offering them that one thing they need. The heatmaps method will help you along the way by sketching people’s behavior on your site and highlighting what they care most about. It’s simple, fast, visual (you don’t need to dig too much into statistics to understand your audience), and fun.

Knowing what your users’ actions are when they land on your web pages could be something truly fascinating, and you can learn a lot from it.

Smashing Editorial
(mc, ra, il)

6 Awesome WordPress Snippets Plugins to Boost Your Google Search Traffic

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/_1tz-XwXl2o/6-awesome-wordpress-snippets-plugins-boost-google-search-traffic

Even if you’re ranking well in Google’s search results, you could be leaving a lot of valuable clicks on the table. These days in order for a site to stand out in Google’s crowded search results, savvy internet marketers are making heavy use of rich snippets. In a nutshell, rich snippets let you embed axillary, […]

The post 6 Awesome WordPress Snippets Plugins to Boost Your Google Search Traffic appeared first on designrfix.com.

How to Survive GDPR: The Essential Guide to the Web’s New Privacy Regulations

Original Source: https://www.webdesignerdepot.com/2018/03/how-to-survive-gdpr-the-essential-guide-to-the-webs-new-privacy-regulations/

With less than 2 months before the General Data Protection Regulations (GDPR) come into force on the 25th May, tens of thousands of businesses are woefully underprepared, and many businesses outside of the EU do not realize that GDPR also applies to them.

Passed by the European Union (EU) to protect the privacy of Europeans’ data, the laws apply to anyone, from Pittsburgh to Pretoria, involved in the collection, storage, or handling of that data. The pan-European approach is designed to protect European data, but the global nature of the web means GDPR establishes the standard for data privacy worldwide.

The financial penalties of non-compliance are exceptionally steep: up to €20million, or 4% of global turnover (whichever is higher) per infraction. But GDPR should not be seen as an obstruction to business, rather a set of sorely-needed best practices for how we collect and handle data.

the global nature of the web means GDPR establishes the standard for data privacy worldwide

GDPR provides protection for an individual’s data, such as a name; it provides even greater protection for sensitive data, such as religion or politics. That might sound overly officious in a country where freedom of religion is constitutionally mandated, but there are numerous jurisdictions in which a person can be imprisoned, tortured, and executed, for holding the ‘wrong’ beliefs. Closer to home it is looking increasingly likely that the exploitation of Facebook data by firms including Cambridge Analytica was a determining factor in several shock election results; if GDPR had been introduced two years earlier there might be a woman in the Oval Office, and the UK might be continuing as an EU member state.

Whatever your motivation for GDPR-compliance, ensuring that your website meets these best practices is substantially simpler, and cheaper, than non-compliance.

The nature of GDPR means that different businesses are affected in different ways, there is no one-size-fits-all route to compliance. This article is not legal advice, and should not be construed as such. If in any doubt, consult your regulator, or a qualified legal practitioner in your jurisdiction.

What is GDPR?

The modern web runs on data, not just site generated content, but user information. It powers everything from social media posts to ecommerce charts. As web professionals we desperately need a comprehensive set of best practices that ensure that human beings aren’t swept aside by the advance of technology.

Those best practices are what GDPR gives us.

Part of the reason that GDPR-compliance appears burdensome to business is that we’ve previously been very lax when advocating for users’ privacy. Many of the current laws are a quarter of a century old. GDPR brings privacy laws into the 21st century. By ensuring that your site, SaaS, or app is GDPR-compliant you’re demonstrating that you take your users’ privacy seriously.

GDPR helps you establish trust with your users, and once your users trust you, they will be willing to divulge more data; strengthening the bond between your brand and your customers.

GDPR is an intelligently constructed set of regulations that make everyone’s data safer, create a happier, less paranoid web, and help lay the groundwork for future data handling.

What Data is Protected?

There are two main types of data that GDPR requires us to protect: personal, and sensitive.

Personal data is any data that relates to an identifiable person. Your name, email address, location, biometric data, online identifiers such as usernames, all qualify as personal data.

Sensitive data is anything that the EU judges to be more private than a name. Your ethic origin, religion, sexual preferences, politics, any criminal history, are all considered sensitive data. Sensitive data is more protected under GDPR and the penalties for failing to protect it are much higher.

What’s not yet clear, is when personal data becomes sensitive data. That decision is likely to be made by the regulators on a case-by-case basis. For example, an email address is personal data, but if your email address is “hilaryfan65915795@…” then it’s possible to infer your politics, which upgrades it to sensitive data.

GDPR makes provisions for data that can be inferred or collated from different sources. If a malicious entity can use the data you hold, such as an IP address, to link sensitive data held on another site to a particular individual, then you have contributed to compromising that user’s sensitive data, even if you do not hold the sensitive data yourself.

The best practice is to never ask for more data than you require—the less data you hold, the less there is to lose.

User Rights Under GDPR

GDPR prioritizes the rights of data owners. In any situation that you are considering requesting user data, first ask yourself: how will this affect the rights of the owner?

GDPR specifies the following formal rights that data owners have:

The right to be informed;
The right to access;
The right to corrections;
The right to delete data;
The right to limit processing;
The right to data portability;
The right to object;
The right not to be subjected to automated decision-making.

However, data collectors also have rights. For example, imagine a user has subscribed to your newsletter. Later, that user decides they no longer wish to receive the newsletter and unsubscribes. You must, without exception, permanently erase that user’s email address. However, if when the user subscribed you recorded their IP address to verify their consent (as you should), you are entitled to retain that data to demonstrate your business’ GDPR-compliance.

To Whom Does GDPR Apply?

GDPR applies to data that is collected, processed, and/or stored in Europe, regardless of where the data is gathered. If you have a newsletter, and a single European subscribes to it, then GDPR applies to you.

If you are transferring personal data outside of the EU…then you must obtain explicit consent to do so

One significant complication of GDPR is that it prohibits transferring data outside of the EU to any country that the EU does not deem to have adequate data protection laws. At the time of writing, several countries including Argentina and New Zealand meet this standard; the United States and Canada are deemed to have partially adequate privacy laws. If you are transferring personal data outside of the EU for processing, or storage, then you must obtain explicit consent to do so from the user who owns the data.

Given the multi-jurisdictional nature of the web, and technology like CDNs, it is wise to assume that at some point in time, data you collect and store, will be transferred outside of the EU and its approved countries. Therefore whatever other permissions you ask from your users, it is advisable to always obtain permission to hold their data outside of the EU.

Practical Steps to GDPR Compliance

It’s important to understand that it is not the EU regulator’s responsibility to prove your non-compliance—they do not have to catch you red-handed. It is your legal duty to prove that you are compliant, and failing to do so is in itself non-compliance.

(The simplest way to demonstrate GDPR compliance is to meet the ISO 27001 standard. However, meeting that standard involves a far higher level of security than most small businesses will be able to meet.)

Adopting Privacy By Design

The fundamentals of GDPR are defined by the Privacy By Design (PBD) approach. PBD takes the attitude that privacy is not ensured by legal compliance, but rather must be adopted as an organization’s default approach.

PBD was first proposed by the Information and Privacy Commissioner of Ontario, Dr Ann Cavoukian over twenty years ago. In 2010 the International Data Protection and Privacy Commissioners voted unanimously to recognize PBD as an essential component of privacy policy. In 2012 the US Federal Trade Commission recognized PBD as a recommended practice.

PBD holds that privacy, once lost, cannot be regained, and therefore threats to privacy must be anticipated and prevented. PBD is defined by seven principles:

Be proactive: PBD is preventative, not remedial. In short, it’s pointless locking the stable door once the horse has bolted.
Privacy by default: A user should not have to take any action to ensure privacy. If a user does nothing, then their data is treated as private.
Embed privacy in design: Privacy isn’t added to a system as an afterthought, it is an integral component of any product or system.
Privacy doesn’t limit functionality: PBD rejects the idea that any legitimate use of data needs to compromise privacy.
Full life privacy: PBD covers the entire lifecycle of a piece of data, from the point it is collected, during its storage, and until it is destroyed permanently.
Transparent privacy: Privacy standards are fully transparent, so anyone using the product or system clearly understands how their data is protected.
Privacy is user-centric: PBD is about respecting the privacy of the individual, the owner of the data should be the first priority.

One of the core concepts of GDPR is that not only should PBD be implemented, but that you fully document your PBD process. If you’re unlucky enough to have to report a data breach to your regulator, the documentation of your PBD approach is the basis for the regulator’s investigation, and its decision regarding your culpability. A substantial portion of that documentation is your Privacy Impact Assessment.

Writing a Privacy Impact Assessment

A core component of PBD, and a requirement of GDPR compliance is a Privacy Impact Assessment (PIA).

Any digital product should have a PIA. Ideally the PIA is a living document that grows as a product is devised (in accordance with the third principle of PBD), but you can write them retrospectively for existing products.

The purpose of the PIA is to document the threats to privacy in your system, and the steps you have taken to combat them. It is essentially a personalized checklist of privacy issues and can be seen as a roadmap for protecting your users’ privacy.

There’s no standard checklist for a PIA, because each project is unique, but there are some recommended practices you can follow. Don’t be afraid to add extra detail if your project warrants it.

Identify the need for a PIA: Why are you writing a PIA? Describe the scope of your project. Describe what data is likely to be required. Describe how sensitive you expect that data to be.
Document the expected data flows: How will users disclose data, how will it be transmitted and stored, will it be processed and if so how? Identify anyone who will be using the data, including management and developers. Speculate on future uses for the data, what might it possibly be used for in future? How long will the data be stored? How can the user modify or remove their data?
Document consent processes: How will you record the user’s consent? How will you verify consent? If consent is not expressly given, is there a legally justifiable basis for collecting the data?
Identify risks: What is the risk to individuals from the data? Is any unnecessary data collected? Is the data backed up, do the backups have the same level of security? Who has access to the data, what about interns, what about third-parties? What if the data is lost, modified, disclosed, misused? Assess any risks including legal complications and loss of reputation.
Identify solutions: Devise ways to reduce, and if possible eliminate, privacy risks. Assess the cost of solutions in terms of time and investment. How do the solutions impact user privacy, and the project? Are there proper procedures in place to handle a data breach? Are there proper procedures in place to comply with legal processes such as a court order to disclose information?
Document the solutions’ integration in the project: Ensure that solutions identified are built into the project. Update the PIA to reflect any technical changes this required.

Continue to build on and expand the PIA throughout the life of your product.

As per principle four of PBD, privacy protection will not compromise any legitimate use of user data. If through the development of the PIA an unacceptable, or unsolvable risk to privacy emerges, then you should question the viability of the project.

Appointing a Data Protection Officer

Large organizations, and any processing certain types of data (banks for example) are required to appoint a Data Protection Officer (DPO) whose role is to ensure that the organization is GDPR compliant. Smaller companies are exempt from appointing a formal DPO. For example, if you run a restaurant, you do not normally need to appoint a formal DPO, however, if you run a delivery business from that restaurant, and you keep on file sensitive data such as allergies (which constitutes medical data) or dietry preferences (especially if those preferences are religious) you will almost certainly require a DPO.

Different member states in the EU describe the requirements for a DPO differently, so it is wise to check.

Regardless of the legal requirement it is always advisable to have a single point of contact who can coordinate privacy efforts across your organization.

GDPR is All About Consent

It seems extraordinary to have to say this in 2018, but a lack of a ‘no’ does not mean ‘yes’. As per principle 2 of PBD, the desire for privacy should be assumed by default.

As per principle 4 of PBD, you cannot say that a user may only use the system if they consent to compromise their right to privacy. Users are entitled to consent, but they are also entitled to not consent.

Never trick users into consent. Those woeful double, triple, and quadruple negative lines of microcopy designed to confuse users into checking one box and unchecking another, are not acceptable under GDPR; users must understand exactly what they’re being asked to disclose, why they’re being asked to disclose it, how it will be secured, and how they can consent (or not).

Under GDPR, consent is carefully defined to ensure that users’ rights are protected:

Consent should be explicit, verifiable, and freely given: You cannot trick or pressure a user to consent. A pre-ticked checkbox does not constitute consent.
Consent must be requested in plain language: You must have reasonable grounds to believe that your users will understand the consent they are being asked to give.
Consent for digital services from a child under 16 requires parental consent: Some EU states will reduce this to 13, but err on the side of caution. Note that if you are gaining consent from children the request for consent must be written in language both the child, and their guardian understand.
Consent must be granular: Users may be willing for you to retain and use their data, but not be willing for you to pass it on to third-parties. Never require blanket permissions. You cannot employ the classic “By visiting this site you agree…” text.

If the consent that you obtain from your users fails any of these requirements, then it will be deemed that you do not have consent, regardless of your users’ intentions.

Writing a Public Privacy Statement

Most websites include a general privacy statement, but GDPR compliance requires a much more specific privacy statement than one that you may have published previously.

In order to comply with principles 6 and 7 of PBD, your site, app, or service must have a Public Privacy Statement (PPS) that is written in plain-language that you can reasonably expect your users to understand.

Your PPS should include the following information:

What data you are collecting: Ensure you include all of the data you’re collecting, not just the obvious; include IP addresses, timezones, default languages, everything.
Why you are collecting that data: For each piece of data, explain why you are collecting it, and why you consider collecting it to be both reasonable and necessary.
What data is required: List any data that is required, either contractually or practically. For example, if the user’s email address is required in place of a username, then say so.
Which third-parties are you sharing data with: Under GDPR you cannot post a general statement about sharing with third parties, you must specify which third-parties, and what data is shared with each third-party, and for what purpose.
Where else you are getting data from: If you’re collating data from elsewhere, what are you importing, where from, and how are you using it?
How long you will hold the data: Be specific about how long the data will exist on your system. Will you remove the data as soon as the user ceases to be a customer? If you intend to hold the data indefinitely, say so.
How the user can invoke their rights: Explain how the user can discover what data you hold, and how the user can request the data be updated or removed.

It’s common to provide reassurances such as “We will not share your data with any third party” but that is untrue for most companies. Whether it be analytics, or third-party hosting, we share an extraordinary amount of data on behalf of our users, GDPR requires us to take responsibility for it. Don’t make promises you can’t keep.

What GDPR Means for Web Designers

There are numerous small ways in which we can improve GDPR-compliance, without radically altering our sites. In many cases, it is simply a change in mindset.

Introduce just-in-time notices. This is the habit of telling users about the data you’re collecting, at the point of collection. For example, beneath your newsletter subscription field, explain that you’re collecting their email address to send marketing material and you’ll also record their IP address to verify their consent. This ensures that, in keeping with principle 6 of PBD, users are aware of what data you hold, for what purpose, and don’t have to go hunting for a privacy policy. (Always include a link to a full Public Privacy Statement in case the user wants more information.)
In order to comply with principle 2 of PBD, when gathering consent, checkboxes must not be pre-selected.
Reduce the data you are recording. For example, location data is often recorded with greater precision than required. If you need to know the state someone is located in, it does not follow that you need to know the city, or the suburb. If you’re collecting longitude and latitude data, truncate a few digits before recording it.
When you record user data, ensure that you record the manner in which consent was given, the date and time. Include the option to mark the consent as rescinded, in case you need to remove the data in future.
Pseudonymize data where possible by replacing identifiable data such as a name, or email address, with an anonymous ID.
Compartmentalize data where possible, so that personal data such as application preferences, are not stored alongside security data such as usernames and passwords.
It’s been standard practice for some years to rely on an email address as a username. Think carefully about whether this design pattern makes sense for your users. It will certainly simplify your login, but it also exposes private data to potential disclosure or misuse.
Ensure that no part of your UI displays personal data. If your UI indicates someone is logged in with a welcome message, then use the least sensitive data you can. For example, an avatar of the user is less sensitive than their name, which is less sensitive than their email address. Assume that someone is reading the user’s screen over their shoulder, without their knowledge; what data are you giving away that you don’t need to?
Could a malicious user compromise data by triggering an error? For example, if a user enters email addresses in a “Forgot Email” form, will the form confirm that the password reminder has been sent (and by inference confirm that the user has an account)?
UX is all about research. If you’re conducting research into your users, how are you storing that data? Is the data sensitive? Are you profiling them?

First Steps to GDPR Compliance

The first step in GDPR compliance for small to medium businesses is to ensure that all stakeholders are aware of, and engaged with the process; it is far easier to implement procedural changes when you have management buy-in.

The next step is to establish which member state is your regulator. If you’re operating within the EU, this will normally be the member state in which your HQ is located. If you’re in the UK, then GDPR applies to you as an EU regulation up until the end of the Brexit transition period in December 2020, after which the UK government expects to enshrine GDPR in British law—at the time of writing it is unclear whether the UK regulator will continue as a member state regulator after March 2019. If you’re operating outside of the EU then it makes sense to select a member state that speaks the same language as you, for English-speaking countries the obvious choice would be Ireland.

Next, carry out a full audit of the data that you currently hold. Where did it come from? Is it current? Who do you share it with? Is it necessary? Is it safe? If you can’t answer all of these questions to all of your stakeholders’ satisfaction (or your DPO if you’ve appointed one), then delete the data.

Do your house-keeping. If a user hasn’t logged into your site since 1997, it’s a fair bet they’re no longer a customer, and the data you hold for them is neither necessary, nor current. Send them a polite email asking if they’d like their account to remain open, if you don’t hear back, then close the account for them and delete their data.

Speak to any third-party you share data with and ensure that they are aware of, and committed to meeting the 25th May 2018 deadline. Large companies, including Google and Twitter, and more niche companies like MailChimp and Intercom, are all committed to GDPR compliance.

it’s a common misconception that GDPR means wiping your mailing list and asking people to resubscribe

Check your mailing list—it’s a common misconception that GDPR means wiping your mailing list and asking people to resubscribe. This is not necessarily the case—if you’ve been building it ethically it may already be compliant; if you have explicit consent to retain an email address for everything you use it for (such as marketing) the user’s consent was opt-in and not assumed, you have a timestamp recording the time of the consent, the email address was not required as part of a transaction (as payment for a ‘free’ PDF for example), and there is a mechanism to withdraw consent, then you may be legitimately able to keep that address in your database. Some companies will find that it is less onerous to wipe their mailing list and start again, even if they could demonstrate proper consent.

Lastly check with whomever hosts your site to ensure that their infrastructure is suitably secure for storing your users’ data.

Conclusion

GDPR is a long-overdue set of best practices for privacy in business, and particularly on the web. It instructs us to treat our users’ data with the same care and respect we treat our own.

The penalties for non-compliance with GDPR are tiered. Tier one is €10m, or 2% of global turnover (whichever is higher); Tier two is €20m, or 4% of global turnover (whichever is higher). These penalties will depend on factors such as whether you have attempted to comply, whether you have taken action to mitigate any data loss, and the types of data involved. In addition, GDPR gives individuals the right to be compensated for any material and/or non-material breach of GDPR.

Although this might seem draconian, the severe penalties facilitate our role as advocates for our users. It is far easier to get management buy-in with the threat of financial penalties.

GDPR-compliance is about protecting your users; become their advocate, fight for their privacy, enshrine their rights in every product you build. It will result in better products, loyal users, and a more trusting—and trustworthy—web.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Ready, Set, Convert – 5 Conversion Rate Optimization Trends for 2018

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/DYnn1e8-fDE/

Whether you’re running an eCommerce site or a standard online business page, your aim will be to convert as many visitors into paying customers as possible. Conversion is the name of the game for any company, and it can happen all over your website, from your homepage to a product page, landing page, or even your blog.

CRO or “Conversion Rate Optimization” is about finding out where your leads turn into customers and working to streamline the process. The better your website is at generating sales, the more sustainable and profitable your organization becomes.

The question is, how do you enhance conversions in a competitive era where customers are more cynical than ever? The following conversion rate optimization trends for 2018 could help.

1. Create a Personalized Experience

The “one-size-fits-all” approach to sales is a thing of the past. In a time when companies are struggling to stand out in an ever-more-saturated space, you can’t afford to deliver a generic online experience. Fortunately, all you need to do to set yourself apart is get to know your customers. According to Accenture, 65% of consumers are more likely to purchase from a retailer who knows their buying history. What’s more, the same percentage feel more compelled to spend money when promotions are tailored to their interests.

Now that your customers have their pick of dozens of different brands to work with, it’s up to you to show them what makes your company different. A great price and a compelling product or service can be a good start, but 96% of marketers today say that personalization helps to build stronger, more lucrative customer relationships.

You can personalize visitor experiences by segmenting customers based on their needs, such as in the Mention.com landing page example below. On the other hand, you can use dynamic advertisements to deliver personalized ads based on previous purchases.

2. Help Shoppers Get the Answers They Need

More options in the marketplace empower today’s customers to select the brand that appeals most to their interests. However, the more choice someone has, the more complex their buyer journey becomes. Because of this, many of today’s customers will instantly go for the experience that’s as simple, and straightforward as possible.

The quicker you can show your customers why they should buy from you, and what they need to do to tap into the value you have to offer, the better their experience will be. Leads want to be able to find the answers to their problems with very little hassle. For instance, Pew Research indicates that 83% of US adults want to have their questions answered about products or services, but they don’t want to call someone to discuss their query.

The easiest way to make sure that your customers have the information they need to make a quick purchase is to provide everything they need to know right there on your landing page. The simple and effective form on the Emprestimo Online landing page allows customers to choose the specific information they need about creditors, and get answers instantly with the click of a button.

emprestimo-pessoal

3. Use Plenty of Social Proof

Today’s customers are more empowered and informed than ever before. They know they have a world of information at their fingertips, and they’re willing to use it to make sure that they’re getting the best deal. This means that if you want to convince someone to buy from you, you need to prove that they can trust you to deliver an exceptional experience first.

While you can always optimize your landing pages to include statements about your values or benefits, people are far more likely to trust the opinions of other customers, than the words of a brand. This means that you need to generate social proof in the form of testimonials and reviews you can include on your website.

82% of adults in the modern marketplace will read reviews and ratings from other clients before they purchase something online. The great news for companies is that you can streamline their search by demonstrating your best reviews on your landing pages, in the form of quotes, 5-star ratings and more. Some companies even showcase video reviews. The PipeDrive website highlights both customer quotes and links to other review websites to turbo-charge its social proof score.

pipedrive

4. Use Video to Hook Customers and Explain Your Values

In 2018, video is more popular than ever. Over the years, this marketing tactic has been gaining weight as a strategy for engaging and captivating customers. Today, countless companies are already using videos and animations to communicate the complexities of their brand story, explain their values, and develop stronger relationships with possible customers.

While you might still need written content to help you rank higher on Google, and appeal to people with different preferences, video is a fast and simple way to earn viewer attention. After all, watching a video requires minimal input from your customer, so they’re less likely to give up and click the back button when they can’t figure out what you have to offer.

The key to success with video is making sure it’s exciting, interesting, and short. Beyond that, it’s up to you to be as creative as you like. Brands have done everything from creating hand-drawn animations to behind-the-scenes videos of their companies. Whatever method you choose, research shows that a video on your landing page can increase conversion rates by 80%.

The Rosetta Stone website includes videos on the landing page, links to interactive demos for different customers, and more. Remember, your videos don’t have to be limited to just one page on your website, they can spread throughout your entire online content portfolio.

emprestimo-pessoal

5. Create a Simple and Effective Checkout Page

It’s always been important to give your customers a straightforward checkout experience, but in a world where cyber security attacks are running rampant, a good checkout process can be the difference between a sale, or another abandoned cart. In fact, studies have found that most eCommerce retailers experience an average abandonment rate of 70%.

While there are plenty of reasons why a person might leave your website at the last moment, from a distraction to the promise of a better price elsewhere, a lack of optimization on checkout pages can be a common problem. Interestingly, one of the biggest reasons that people will give up on a purchase when they hit the checkout page is that the “extra” costs like postage and packing are too high.

If you can’t do much about the price of your shipping fees, then you should make sure that your customers know exactly what they’re going to pay before they get to the checkout. For instance, if you have a flat shipping charge, show it next to your product prices. On the other hand, if you have a minimum fee for free shipping, display it as a banner on your product pages.

Amazon.com displays whether an item has free shipping or not on each product page, so you can judge whether you want to pay the extra fees or look for a different seller.

amazon

Are You Ready for Better Conversions?

The online world has never been more competitive, with new companies joining the fray on an almost constant basis. The good news is that if you’re willing to do some research and stay ahead of the trends, then you should have everything you need to outshine the competition and earn those all-important conversions.


Collective #399

Original Source: http://feedproxy.google.com/~r/tympanus/~3/i9BhEkz_zuU/

C399_pixify

Pixelify

A community for sharing digital items that are free for personal or commercial use.

Check it out

C399_Monday

Our Sponsor
monday.com: The #1 Trello alternative for your team

Manage your design projects & tasks, plan product roadmap visually, and communicate all in one place while you stay-on-top of your team’s entire workflow.

Create a free account

C399_scroll

ScrollBooster

A small drag-to-scroll library made by Ilya Shubin.

Check it out

C399_emma

Emma

Powered by Algolia and Yarn, Emma is a command line assistant which helps you search and install packages more quickly.

Check it out

C399_uifaces

UI Faces

A very useful avatar aggregator that uses different sources. Made by Mighty Alex.

Check it out

C399_d3

D3 Graph Theory

A quick and interactive introduction to graph theory. By Avinash Pandey.

Read it

C399_cssart

CSS Doodle Art

Some amazing CSS art made by Yuán Chuān.

Check it out

C399_16

Conversational Design

An excerpt from Chapter 1 of Erika Hall’s new book, Conversational Design.

Read it

C399_variables

Theming With Variables: Globals and Locals

Andres Galante shows how to use the concept of Global and Component variables for better design theming.

Read it

C399_theme

Evie

Evie is free template bundled with a minimal style guide. Read more about it in this article.

Check it out

C399_aicolorwheel

AI Color Wheel

The AI Color Wheel automatically colorizes logos, illustrations, wireframes and other graphical art.

Check it out

C399_Luxe

Luxe

An easy to learn game engine for making 2D or 3D games for Mac, Linux, Windows, iOS, Android and the Web.

Check it out

C399_js

How JavaScript works: the rendering engine and tips to optimize its performance

Alexander Zlatkov’s 11th article in a series dedicated to exploring JavaScript and its building components.

Read it

C399_LinkedIn

LinkedIn Reimagined

Vamsi Batchu’s elaborate vision of a better LinkedIn.

Check it out

C399_Font

Free Font: Long Johnson

A great display font designed by João Vitor Scarpim.

Get it

C399_squiggle

Wiggly Squiggly

Steve Gardner created some colorful SVG squiggles that follow the mouse.

Check it out

C399_eu

EU wants to require platforms to filter uploaded content (including code)

Read all about upload filters that the EU proposed as requirement because of potential copyright infringement.

Read it

C399_resptable

Responsive Table

Jeremy Church shares a mobile-friendly table solution with persistent table headers.

Read it

C399_tips

Check out these useful ECMAScript 2015 (ES6) tips and tricks

Some very useful tips for EcmaScript 2015 by Raja Rao.

Read it

C399_ART

Geometric cover replication with CSS Grid, clip-path and writing-mode

Melissa Em created this nice demo.

Check it out

C399_whisps

Whisps C

An really nice p5.js powered demo.

Check it out

C399_Glitch

From Our Blog
Glitch Effect Slideshow

A simple slideshow that uses the CSS Glitch Effect for the slide transitions.

Check it out

Collective #399 was written by Pedro Botelho and published on Codrops.

How to Easily Screen Capture and Edit Videos on Your Computer

Original Source: https://inspiredm.com/easily-screen-capture-edit-videos-computer/

If you’re trying to capture parts of your screen and edit those captures, you have several ways to do so. For instance, Windows and Mac come with the functionality to take your own screenshots, but there are few options for video capture, and even the screenshot tools are pretty watered down.

So, if you’re making a tutorial, or you would like to capture something like a video or webinar on your computer, it can all be done by using the right tools and learning how to use them.

So, for those looking for one of the most efficient ways to get screen captures and edit those videos, keep reading to learn more.

Step 1: Get the Right Tools

A favorite of mine is Movavi, since it provides options for screen capture and editing in one package. So, for this tutorial, you can download the Movavi Mac Recorder, or the Windows version, depending on which type of machine you’re running.

After installing the program, open and run it.

It asks you to register the product at that point, but you can skip this for now. The main reason you would register is if you’d like to sign up for special deals from Movavi. There’s also a trial version with some limitations, but the full version of Movavi is quite affordable and worth the investment.

Regardless, once the Movavi module shows up on your screen you can get started with your settings and screen capture options.

Step 2: Configure Your Settings

The first part of the screen capture involves adjusting your capture area. You can choose some preset dimensions or type in your own. To drag the capture area to a different location, click on the orange icon in the middle of the square. This allows you to move it around.

Some of the other settings are rather important depending on what you’re trying to achieve. For example, I often use screen capture software for making my own video tutorials. In this case, I’ll want to hook up my microphone so people can hear my instructions. On this same screen, it allows me to shut off the webcam, shut off the recording of system audio, and turn on my microphone. Some people like hearing the system audio, but it doesn’t make much sense for a tutorial.

It’s also worth mentioning that the Capture Area drop-down provides options for widescreen, full screen, and even YouTube dimensions. So, if you’d like to record your entire screen, there’s a setting for that.

Step 3: Select Capture Area and Grab Screenshots

Click on the Capture tab to reveal some other essential tools. The first one is the Select Capture Area option, which is a more flexible way of setting your video dimensions. When you click on this button it lets you drag the capture box by the corner to get the perfect area to record.

You can also save screenshots directly from this menu, which is often important for presentations and tutorials, when you’d like to highlight something instead of moving right through it with a video. Finally, scheduled recordings are available, which might come in handy if there’s a webinar coming up but you’re not going to be around to watch it. All you have to do is open up the webinar page, make sure the computer stays on during that time, and set Movavi to record at the right time.

Step 4: Specify Cursor Effects

Cursor effects are yet another optional setting in Movavi, but I know that plenty of instructors online like to take advantage of this type of highlighting. One option lets you highlight the cursor when you make a click, while another one highlights the cursor at all times. You can even record the click mouse sound and customize these effects in greater detail.

Step 5: Capture Your Video

Once you have all of your settings configured, it’s time to start capturing your screen. To do so, click on the big red Record button on the right hand side of the module.

Movavi displays a countdown to prepare you for the recording. After that, the Movavi module still remains in view, but it won’t be visible in the actul recording. You can see the duration of the current video, along with how much space it’s taking up on your computer. You can also turn on the webcam right from that area, which helps out if you want to chime in every once in awhile and show your face. Other than that, the standard Cancel, Pause, and Stop buttons are shown for quick use.

Step 6: Download the Video or Make Minor Edits

After you stop a screen capture, the video shows up in a new window. This is an opportunity to complete some smaller edits and watch the video to make sure everything went well. If the video looks up to your standards, click on the Save As button to store the file on your computer. You have several video file options to choose from.

The main editing feature in this area is the Cut functionality, which lets you clip certain parts of the video and delete them if needed.

Step 7: Install and Launch the Movavi Editor for Advanced Edits

Although this is a completely optional step, you may want to take your editing a step further. Luckily, Movavi also has a powerful editing tool that links up to the the screen capture program. It’s a separate download, but once you get both products the integration is seemless.

I’m not going to walk through all of the editing features, but you can add folders, media files, recorded videos, and screencasts. You have a wide range of effects, transitions, titles, and stickers to play around with, and the video and audio adjustment tools are pretty much everything you’ll need for making professional results.

Good Luck With Your Screen Captures and Edits!

I like the combination of screen capture and editing items in Movavi, since with other tools you often have to export and import into completely different software.

If you have any questions about completing your own screen captures, let us know in the comments!

header image courtesy of TIE A TIE by Aiste

The post How to Easily Screen Capture and Edit Videos on Your Computer appeared first on Inspired Magazine.

Business Ideas for Entrepreneurs to Be More Creative

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/TjzpVHMu8uw/business-ideas-entrepreneurs-creative

Customers value originality and creativity from the different establishments that they do business with. If, as an entrepreneur, you want to make sure that your business becomes an established brand with these core values, you need to make sure that you implement different business strategies that will help showcase this sense of ingenuity. Written below […]

The post Business Ideas for Entrepreneurs to Be More Creative appeared first on designrfix.com.

Pay What You Want for the Expert Photography Bundle

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/icHINITXZQ4/pay-expert-photography-bundle

Most people have cameras, but not everyone knows how to take great photos. Learning how to take professional quality photos will benefit you in a number of ways. Not only will you be able to capture life’s precious moments, you’ll be able to capture it in a unique and compelling way. Whether you are looking […]

The post Pay What You Want for the Expert Photography Bundle appeared first on designrfix.com.

Wix Logo Maker Review: Free, Professional Logo Design and Suggestions, With the Option to Purchase

Original Source: https://inspiredm.com/wix-logo-maker-review-free-professional-logo-design-suggestions-option-purchase/

When you think of free logo design services, it might make you cringe. The reason for this is usually because you’re stuck with a generic logo building tool and minimal branding assistance. However, Wix is taking an alternative approach with its logo maker, offering a beautiful design experience for free, along with the option to purchase high-quality files if you like it. The reason the Wix logo maker works so well is because of the fact that you can develop the logo based on what your brand already looks like. On the other hand, if you’re just thinking about your brand image. the Wix logo maker is a wonderful place to start.

Not everyone is a professional designer, so it looks like Wix makes it easy to design your logo with the simplest of tools while also generating beautiful logo images, fonts, and unique designs. You can also download the professional vector files afterward, instead of sticking with something less professional like PNG or JPG files.

Overall, Wix has been a valuable ally to those who want excellent websites without the high cost. It’s also a nice solution for those with limited design skills, since the Wix interface is one of the easiest to understand. Therefore, it makes sense that Wix has gotten into the logo making game, and we’re excited to give the logo maker a test drive.

Wix Logo Maker Review: How the Tool Works

Another reason the Wix logo maker is so unique is because it doesn’t send you straight to the builder. In fact, you’re asked several questions to get an idea of your brand culture and what you’re going to be selling. Therefore, the process starts by asking you some simple questions that take no more than five minutes to complete. For instance, one of the questions is “What describes you?” Then, you can choose keywords like formal, hipster, or playful to describe your brand.

One of my favorite parts is the Like/Dislike page, where you’re shown a handful of designs to see exactly what type of style you’re into. You select the ones you like and dislike, then Wix can make a decision as to what your logo should look like.

Finally, the results of your quiz are revealed, with your company name and optional tagline inserted into each of the designs. For this review, I made a company called Joe’s Shoes. Wix recognized that I was selling shoes, so it placed different shoe icons in some of the designs. I was surprised at the wide range of designs presented, since I was able to keep clicking the More button to see what else was available. In addition to that, you have a button for changing the icon, adjusting your company name, and moving onto the editor.

Once you land in the editor you receive a solid designer for making adjustments to your logo. It looks similar to the Wix website builder, so even beginners should have an easy time walking through this. You can change everything from the icon color to the tagline.

 

The last step is to download your logo based on which package you want. We’ll cover the pricing below, but you can also get a free sample from this page as well.

How Much Should You Expect to Pay?

As mentioned previously, gaining access to the Wix logo maker won’t cost you a cent. You can receive suggestions for your logo and adjust the suggestions to fit your brand. Wix also states that it’s highly unlikely that any other company will have a logo exactly the same as yours.

After the design process, you can download a free demo file to look at, compare, and share with other people in your organization.

As for when you’d like to make a purchase, here’s how pricing looks:

Basic Logo – $12.99 for high-resolution logo files and full commercial usage rights.
Professional Logo – $49.99 for high-resolution logo files, full commercial usage rights, vector files, a social media kit, brand guide, and print ready files.
Professional Logo and Website – $99.99 for everything in the previous plans and a $168 promo code for your own branded website.

As you can see, the pricing for the logo design is about as reasonable as you can get. I can’t imagine paying for the basic logo, since running a business also typically requires the social media kit and vector files. However, the $50 for the professional logo is a great deal. In addition, you pretty much get a free website for a few months when opting for both the logo and website package.

What Makes the Wix Logo Maker Stand Out?

Besides some of the best features we covered above, there are some other advantages to going with the Wix logo maker as opposed to other options online. After all, when you search for a logo maker, hundreds of results come up.

So, why would I consider Wix over the others?

To start, it’s integrated with the Wix platform, so if you’re already running a site on Wix it makes sense to keep all of your tools under one roof. This way you can quickly transfer the logo to your Wix website. In addition, the logo maker is built to match your logo design to the current branding of your website, and vice versa. So, you’re more likely to establish a recognizable brand with similar colors, fonts, and icons.

Finally, the Wix customer service resources are already established and ready for you to use. The company isn’t known for its direct support, but the online resources are the best in the business. Therefore, you can go to the blog or knowledge base and learn all about designing your logo, while also checking in on some tips for your website.

Is the Wix Logo Maker for You?

If you’re already on the Wix website builder and you need a new logo, I’d recommend giving the logo maker a try. I also like it for those who don’t quite have a logo design in mind and would like to see suggestions.

If you have any questions about this Wix Logo Maker review, let us know in the comments below.

The post Wix Logo Maker Review: Free, Professional Logo Design and Suggestions, With the Option to Purchase appeared first on Inspired Magazine.

Collective #400

Original Source: http://feedproxy.google.com/~r/tympanus/~3/Jz4FM567jTw/

C400_WOTW

Inspirational Website of the Week: Mustafa Çelik

Beautiful liquid effects and great typography. Our pick this week.

Get inspired

C400_NW

This content is sponsored via Syndicate Ads
Northwestern’s Online MS in Information Design & Strategy

Build skills to translate data into compelling visuals and narratives and learn how research and analytics can drive communication strategies and tactics.

Find out more

C400_optbuild

Machine Learning-Driven Bundling. The Future of JavaScript Tooling.

Learn about the early implementations of zero-configuration build tools which are powered by machine learning to create the most optimal build. By Minko Gechev.

Read it

C400_graphqlcss

GraphQL CSS

A blazing fast CSS-in-GQL library that converts GraphQL queries into styles for your components.

Check it out

C400_amp

How Fast Is Amp Really?

Tim Kadlec takes a closer look at how fast AMPs really are considering different contexts.

Check it out

C400_midi

Getting Started With The Web MIDI API

Peter Anglea shows how to interact with digital musical instruments using the Web MIDI API.

Read it

C400_layoutanim

Behind the Illusions – Impossibly High-Performance Layout Animations

David Khourshid’s fantastic presention on the tricky art of performant layout animations.

Check it out

C400_loop

Looperepool

Jaume Sanchez implemented this great tool for creating looperinos.

Check it out

C400_soundscapes

Imaginary Soundscape

A great project: a web-based sound installation for creating soundscapes for Google Street View can now be tried online with any image.

Check it out

C400_week

Design Your Week

David Khourshid’s smooth implementation of Gal Shir’s popular Dribbble shot.

Check it out

C400_reacttest

React-testing-library

Simple and complete React DOM testing utilities that encourage good testing practices.

Check it out

C400_motion

Flow Field

A WebGL powered motion field webcam based particles system made by Dorian Lods.

Check it out

C400_research

Designing for Research

Jeremy Wagner shares how he designed and developed an image quality survey which now goes into round two.

Read it

C400_pathslider

Animating More Elements Along SVG Paths with JavaScript (Part 2)

Luis Manuel shows how to do more awesome animations with the PathSlider library.

Read it

C400_css

CSS: The bad bits (and how to avoid them)

Joe Forshaw shares his thoughts on what’s bad in CSS and how to keep sane when writing it.

Read it

C400_tram

From Design to Code: Creating and Animating Images with CSS

José Rosário shows how he created an animated HTML/CSS tram.

Read it

C400_caramella

Caramella

In case you missed it: a new kind of blogging platform with over 80 styled templates for individual blog post looks.

Check it out

C400_filam

Imaging-heap

A command line tool to measure the efficiency of your responsive image markup across viewport sizes and device pixel ratios.

Check it out

C400_expl

Mesh Line Explosion

A fantastic Three.js demo by Jack Rugile.

Check it out

C400_deck

Deck: A Free Card-Style UI Kit

A cross-platform UI kit for designing card-based interfaces and media websites. By the team of InVision.

Check it out

C400_vuecookbook

Vue.js: The Cookbook

The beta release of a new, practical section of the Vue.js documentation.

Check it out

C400_mario

Super Mario World made only with CSS gradients

Alcides Queiroz shows how he created a short Super Mario World animation without any images or JavaScript.

Read it

C400_invision

The Design Genome Project

InVision’s new project to find out what powers great design.

Check it out

C400_font

Free Font: Particle

A clean and minimalistic font designed by Jeremy Vessey.

Get it

Collective #400 was written by Pedro Botelho and published on Codrops.