1. An Insecure Web Host

13 novembre 2020/par Service comm.

How to Design a Contact Page That Drives Engagement

How can your customer reach you? If a client arrives on your website after searching on Google, what can they do to take the next step in a relationship with your brand, without buying anything?

One of the primary aims of any website is to drive conversions. However, it usually takes between 5 and 8 touchpoints to generate a viable sales lead. People don’t want to convert straight away.

Since building a relationship with customers is crucial to success, it makes sense that the contact page would be an essential part of driving results. Unfortunately, a lot of website owners pay virtually no attention to that page. They ask their designer to create a page with their address and phone number on – and that’s it.

What many business owners don’t realize, is that the contact page is the door to deeper, more lucrative relationships with potential prospects. The design of this essential website element needs to be fantastic to drive results.

So, where do you start?

Defining a Well-Designed Contact Page

Let’s start with the basics, what makes a great contact page?

The complete answer to that question depends on the target audience. Some customers will want to see fun and friendly contact pages, complete with social media sharing buttons. Others will want to see a map that shows them exactly how to reach an office or business.

There are a few golden rules to keep in mind, of course. Contact pages should be:

Easy to find: Don’t hide the link to the contact page on the website footer. Make it easy for customers to find out how they can get in touch.
Simple: Don’t put too much content on this page or it will overwhelm your audience. Just let them know where they can go to get answers to various questions.
Professional: Even if you have a friendly brand personality, your contact form still needs to be grammatically correct and well-designed to show a professional edge.
Convenient: Make your phone number clickable so customers can use it on Skype. The same can apply for your email address. Provide easy access to social media profiles, and if you have a contact form – keep it short and sweet.
Informative: Include all of your contact information in the same place. This may include your address, a map to your location, social media pages, email addresses, and even forums.
Accurate: Ensure that the information on your contact page matches the information listed elsewhere. Check directories and Google my Business listings to be sure.
Attractive: Yes, a contact page needs to look good too. Plenty of white space will make essential information stand out. A good layout will guide the eye through the page.
Consistent: Make sure the contact form on your website matches the brand personality that appears on all of your other pages.

Take a look at the Tune Contact page:

It’s beautifully laid out, with clear information that’s easy to read. The company shows exactly why customers might want to get in touch and how they can reach out. As you scroll through the page, you’ll find additional office locations, email addresses for different teams (sales and support), and links to social media accounts too.

How to Drive Engagement on a Contact Us Page

A good contact page needs to look fantastic, showcase the company’s personality, and capture audience attention. However, there’s a big difference between a contact page that gets the job done, and one that convinces your audience they have to connect with you.

Here are some excellent ways to make your contact us page stand out.

Step 1: Using Color Correctly

Color and color psychology have a massive impact on user experience.

Studies constantly demonstrate the conversion powers of having the right shades on certain pages throughout your website. For instance, changing a CTA button from red to green can increase click-through rates by 27%.

However, every audience is different. The colors that drive engagement on a contact page for your company will depend on your target customer. A/B testing color palettes that match your brand personality is a good way to get started.

One interesting example of colors that make the right impact on a Contact Us page comes from Hubspot. Here, the brand maintains it’s brand color (orange), but it also introduces some new shades that convey trustworthiness and professionalism.

Blue is the most calming and credible color for any brand, The gradient that Hubspot uses here blends perfectly with its brand identity, allowing for a stunning contact page, with CTA buttons that still stand out.

Experiment with colors that can generate the right emotional response from your audience, but don’t ignore the golden rules of color in web design. You still need to showcase your brand identity, and you still need a way of making crucial information stand out.

Step 2: Humanizing the Customer Service Team

Some of the customers that arrive at a contact page are interested in your product or inspired by the potential of your service. Other customers will be looking for assistance because they’re frustrated with something or stressed out.

If you’ve ever had a problem with a product and wanted to reach out to the brand about it, you’ve probably noticed how annoying it is to find a blank contact page with nothing but an email address. The lack of effort and humanity in the contact page is enough to convince you that you probably won’t get a response.

But what if you add some happy smiling faces to the page?

Research indicates that brains are fine-tuned to recognize and appreciate human faces. Having a picture of your customer service team, or just any human being on your contact page makes you instantly more approachable. Your customers start to feel like they’re reaching out to a person – not an empty website.

Look at how engaging and personalized this contact page from Amber McCue looks:

Although you can show any human face on your contact page and potentially get results, showing your actual agents will be more likely to drive positive results. It’s a great way to showcase the authenticity and humanity of your team.

Step 3: Making it Easy to Find

A surprisingly large amount of the time, companies shove their contact information into the footer of their website, forcing customers to spend forever looking for them. However, your audience might not want to spend an age searching for your details if they’re in a hurry to get answers.

Stowing a contact page in a footer is also a problem for those visiting your website via mobile, as they might not be able to see all your footer details and links as well.

A Contact Us page doesn’t have to be a massive part of your website navigation if you don’t want it to be. However, it should be one of the first things your audience can see. Putting the information on the header of your website, or even sticking it to the top of the page as your users scroll is very helpful.

Zendesk makes it easy for customers to get in touch in multiple ways. First, the Contact section of the website is clear at the top of the page. Secondly, if you start scrolling through the Zendesk website, a “Get Help” button pops up, so you don’t have to scroll back to find assistance:

Remember, aside from making sure that your contact page appears in the right part of your website, it’s also worth ensuring that it’s easy to understand. Don’t use unusual terms like “Chat”, or “Chill with us”. Stick to tried-and-true options like Help, Contact, or Support.

Step 4: Making the Experience Relevant

There’s a reason why it’s practically impossible to find a one-size-fits-all contact page.

It’s because different customers need different things from your brand.

Some customers will be looking for the answer to a question; others will want to discuss something with your sales team. That’s why many companies are using adaptive contact pages that can change to suit the situation.

For instance, you may start by asking customers what they need help with. Zapier takes this approach with its Contact page:

By asking the client what they need straight away, Zapier can make sure that the visitor finds the right information, and the right number or email address for the appropriate agent. You can even scroll down the help page and look for something in the available help centre, using the search bar. Or you can click on View our experts to hire a Zapier pro.

Creating a dynamic and customized experience like this does a few things. First, it ensures that the customer will reach the right person to help them first-time around. This reduces the number of inappropriate calls your employees have to deal with, and the number of transfers.

Secondly, you deliver a better experience overall for your client, because they don’t have to repeat their issue to multiple people or start a massive email thread. They get the support they need immediately.

Dynamic contact pages can even save you some money and time. If clients decide to solve an issue themselves, using your resources, that’s great for your busy agents.

Step 5: Direct People to the Right Place

The central focus of your contact us page needs to be the available contact options. Centralizing the contact options on a page is an excellent way to make sure that they get the right amount of attention. Centralizing also means that your customers can spend less time searching for the contact details that they need, which is great for usability.

The Melonfree.com website uses a contact us form that’s centralized to immediately pull attention to the customer’s options for getting help.

Centralization isn’t the only way of using design principles to guide visitors on a contact page. According to Ray Hyman and Edmund Hick, increasing the number of choices on a page often increases the time it takes for people to make a decision.

When it comes to connecting with a brand, the right option for each customer will depend on the person and the situation they’re trying to overcome. For instance, a customer that needs to reset their password will probably be able to get the solution they need from an FAQ page.

On the other hand, someone who needs help using a new feature might need the guidance of a professional. To help guide customers to the right solution, Basecamp gives customers a variety of steps to follow to get the right solution fast.

The main purpose of the contact page is to help customers get the right answer with an informative form. However, there are unobtrusive alternative options available too. If all you’re looking for is a way to help yourself fix a problem, you can click on the help guides link before you ever scroll down to the form.

Step 6: Support the Contact Team Too

The best contact us pages aren’t just a great way to improve customer experience. Well-designed solutions also help the customer service team to save time and stay productive.

One of the primary metrics that companies consider when evaluating the success of a service team, is the number of replies required before an issue is resolved. However, if the initial question from a customer doesn’t contain enough information, this number often increases.

Using the design of the contact form to access the right information helps with:

Automatically routing people to the right team member: Companies can set up segmentation rules that automatically send certain emails to different employees based on keywords. You might have questions that go to the sales team, and separate queries that you direct straight to the customer service team.
Show appropriate support options and FAQs: Remember to give the audience a chance to help themselves before they reach out for extra support. Links to an FAQ page or self-service options can really reduce the pressure on a team. Some companies even add automated chatbots to the mix to help with self-service.
Prompt for extra context: Although not every customer will take advantage of an opportunity to add extra information to a form, some will. Adding a box to your contact form for “anything we need to know?” is a great way to generate more information. Ban.do includes a simple “question” box where customers can add as much detail as they like. An option to add screen shots or documents might be a nice touch too.

Building Your Own Contact Us Page

Every customer has their own specific set of needs. The right contact page for another business might not be the right one for you. That’s why it’s so important to take some time getting to know your customers and speaking to your support team.

When you’re planning your contact page, it helps to ask yourself some basic questions about what you want to achieve. For instance:

What kind of channels will our customers want to use to connect with us? Look at things like social media messaging, email, or phone calls. If you’ve got a relatively tech-savvy audience, then they might want to use things like instant messaging with chat bots too.
How can we direct clients to the appropriate channels in as little time as possible? Having a system in place to automatically route your customers to the right agent will reduce the time to resolution for your customers. The faster you solve problems, the better your reputation becomes.
What can we do to set customer expectations and build confidence before they speak to us? Designing a professional-looking contact page will increase customer confidence, while an FAQ section shows that you’re ready to answer common questions.
How can we showcase a unique brand personality without making the page complicated? Everything from using distinct brand colors on a contact page, to adding images and illustrations reminds customers that they’re in the right place.
What can we do to reduce the friction points in a customer’s path to contact? Avoid adding too many input options to a contact form and ensure that it’s easy to reach out when your clients have a problem.

Understanding exactly what your audience needs from you, and what they’re looking for when they come to your team for help reduces the effort involved for your client when they reach out for help. Remember, today’s digitally-savvy customers expect their interactions with companies to be as streamlined and simple as possible.

Make the Most of Your Contact Page

Contact pages are frequently an afterthought in the website design process. However, they’re one of the most valuable tools your company has. With a good contact page, you ensure that your customers can always reach you when they have problems. What’s more, you boost your chances of people wanting to reach out to the sales team too!

Good luck creating a contact page that encourages engagement from your target audience. Don’t forget to track your results from each design, and A/B test for optimization.

11 novembre 2020/par Service comm.

So, You’Ve Won An Exciting Redesign…What Now?

The transitioning of power is fraught with difficulties. Different teams have different values, different experience, different expertise, different priorities, and that leads to different tooling, and different methodologies.

It’s tempting to think of web design as an end-to-end process, starting with research and concluding with metrics. The reality is that most designers and developers join projects part-way through an ongoing process.

That leaves us with a difficult choice: do we try and meet the client’s expectations with our own toolset, or adapt to the tools and processes that are already in place?

For anyone who’s taking over a web project from a different designer/developer/agency (D/D/A), here’s a practical guide to help you make a success of the transition.

Step 1: Find Out What Went Wrong

99.99% of the time, something broke down in the previous client-D/D/A relationship.

In my experience it’s almost never about money. Most clients are willing to pay above the basic market rate if they believe they’re receiving a good return on their investment. A client that tells you the previous D/D/A is simply too expensive is anticipating negotiating your fees.

happy clients don’t shop around

Occasionally you’ll find that a freelance designer has been headhunted by an agency, and is no longer available. Occasionally the company outgrows a D/D/A, moving into areas that the D/D/A doesn’t support. But these situations are rare, happy clients — even moderately content clients — don’t shop around. If they’re speaking to you, something motivated them to do so.

It is alarmingly common that a D/D/A simply goes AWOL. It’s most common at the lower end of the market where the sums of money involved are less likely to prompt a legal dispute. Frequently, an unreputable D/D/A will ghost a client in favour of a better, newer opportunity.

Sometimes the client hires a new manager, and the new manager ushers in revised expectations that the previous D/D/A can’t meet.

Most commonly, the previous D/D/A has dropped the ball one too many times — mistakes happen, and reasonable clients will tolerate them provided they are rectified promptly, but everyone has their limits.

Most clients will be more than happy to explain what went wrong in the previous relationship; it will inevitably be a one-sided explanation, but it will help you to understand the client’s expectations.

Be extremely wary of a client who doesn’t know what went wrong. Be even more wary of a client who talks about “upgrading” their outsourcing — they’re trying to flatter you. In these cases the client may well be hiding something — like their failure to pay invoices.

Remember: at some point the previous D/D/A was new, and excited about having a new client, was optimistic about the project, and it didn’t end well. The best way to not repeat mistakes is to learn from them, and to do that you need to know what they were.

Step 2: Carry Out a Comprehensive Audit

We’re often so eager to secure new work, that we rush to have the client sign on the dotted line, expecting to be able to tackle any problems later.

It is imperative that as a professional, you keep your promises. Before you make those promises, take your time to understand the project and related business. If a client is invested enough to sign a contract with you they won’t mind you doing due diligence first.

Is There Still a Relationship With the Previous Designer/Developer/Agency?

Clients rarely have a full picture of their project — they’re not web professionals, if they were they’d be building their own sites. Your best source of information is the previous D/D/A.

Before you contact the previous D/D/A check with your client; it’s possible they don’t know they’re being replaced yet. If your client is fine with it, then reach out.

When you speak to the previous D/D/A be sensitive to the fact that you’re taking money out of their pocket. Certainly the previous D/D/A may tell you where to go, they may ignore you altogether, but most will be pragmatic about handing over a project if only to ensure their final invoice to their now ex-client is paid promptly.

Every site has its idiosyncrasies, if you can establish a friendly rapport with the previous D/D/A then the transition will be considerably less bumpy.

Who Controls the Domain Name(s)?

In my opinion a company’s domain name(s) should always be held by the company; it’s such an essential business asset that it should be guarded as jealously as the company’s bank accounts.

Unfortunately there are businesses that outsource everything to do with the web. If the break with the previous D/D/A is acrimonious then securing the domain name could be problematic.

It’s not your job to secure the domain name — you have no leverage, the client does. It is your job to impress upon the client how mission-critical the domain name(s) is.

Who Controls the Hosting?

Hosting arrangements vary from project to project. It’s not uncommon, nor unreasonable, for the previous D/D/A to be hosting the client’s site on their own space. If that is the case, be prepared to migrate it quickly either to your own server, or a dedicated space.

If you’re migrating onto a new space pay particular attention to the email provision. Taking over a project usually means taking over a live project, and that usually means email accounts.

In any case, you need full access to the hosting space. You certainly need FTP access, you probably need SSH access.

In addition to hosting, check if your client’s site uses a CDN, and if it does, who has control of it.

Backend Source Code

Once you have FTP access to the hosting server you can probably grab all backend code from the server.

The benefit of grabbing the code from the server — as opposed to accepting files from the previous D/D/A — is that you can be absolutely certain you’re getting the current (working) code.

If the client has broken with the previous D/D/A because they were unable to deliver on a particular task, you do not want to be working with files that have been partially modified.

Fresh Installs

If you’re working with something like a CMS, it’s often a good idea to run a fresh install on your server, and then copy across any templates, plugins, and migrate the database.

Frontend Source Code

When it comes to acquiring source code, frontend code is far more problematic than backend.

frontend code is far more problematic than backend

If the previous D/D/A is even part-way competent then the CSS and JavaScript on the web space is minified. Minified CSS is not too problematic and can be unminified fairly easily, but you do not want to be unpicking a minified JavaScript file — I once had a project in which a developer had minified his own code in the same file with all of his dependencies, including both Vue and jQuery [yes, I know].

Dealing with frontend source code can take on an additional dimension if you discover that the previous D/D/A used techniques you don’t — using Less instead of Sass, or writing scripts in TypeScript.

Unminifying CSS & JavaScript

Unminifying (or beautifying, or prettifying) code is reasonably easy. There are tools online that will help, including Unminify, Online CSS Unminifier, FreeFormatter, JS Minify Unminify, and more. You’ll also find plenty of extensions for code editors including HTML-CSS-JS Prettify for Sublime Text, and Atom-Beautify for Atom. You’ll find that some editors have the functionality built in.

A word of warning: code beautification does not restore comments, and in the case of JavaScript, does not unobfuscate variable names. Beautifying code is no substitute for a copy of the original, unminified source code.

Emergency Measures

If unminifying the source code isn’t possible for any reason, or more likely, the unminified JavaScript still looks like minified code — albeit nicely formatted minified code — then your last resort is to import the code and override it where necessary.

The first thing to do in this case is to explain the situation to your client. Make sure they understand this is a temporary patch that you’ll iron-out as you rebuild parts of the project.

Then, copy and paste the old minified code into a fresh project setup. For CSS that probably means creating a legacy.scss file, including the old CSS, and importing it into your own Sass. For JavaScript, create a legacy.js file, add all the old JS, and import that.

This will result in a much bigger set of files than necessary, you may end up using !important in your style declarations [yuck], and you’ll trigger lots of Lighthouse warnings about surplus code.

However, in the likely event that your client has a long list of changes they wanted live yesterday, this dirty hack will give you a working site that you can then rebuild piece by piece over time.

Assets

Assets normally means images, and images can normally be grabbed via FTP.

Occasionally — although less occasionally now image files rarely contain text — you’ll need the source files to make changes to images.

Whether or not the client has them, or if the previous D/D/A will hand them over, depends largely on the agreement between the client and the previous D/D/A.

Most businesses are reasonably aware of the importance of brand assets, so you’ll probably find they at least have a copy of their logo; whether it’s an SVG or a JPG is another matter entirely. Impress upon them the importance of locating those files for you.

Third Party Code

It is rare to receive a project that doesn’t rely on third party code. That third party code is probably entwined in the custom source code, and unpicking it is a time-consuming job.

It is very likely the previous D/D/A used a library or framework, and given the increasing number of them, it’s even more likely that the library or framework they used is not the one you prefer.

Whether you choose to unpick the code and swap out the previous D/D/A’s dependencies for your own preferences (usually faster in the long term), or whether you choose to work with what you’re given (usually faster in the short term) is entirely up to you.

In my experience it’s no hardship to pick up another CSS library; switching from one JavaScript framework to another is a substantially bigger job involving not just syntax but core concepts.

Beware Build Environments

Everyone has their own way of doing things. Some D/D/As embrace build environments, some do not. Some build environments are simple to use, some are not. Some build environments are adaptable to your process, some are not.

Unlike adopting a library, or even a framework, adopting a new build process is rarely a good idea

Build environments are numerous — Gulp, Grunt, and Webpack are all popular — and D/D/As are almost as opinionated about them as they are about CMS.

In lieu of raw files, it’s not uncommon for the previous D/D/A to tell you to “just run such-and-such CLI” command, to match up your local environment to theirs. Unlike adopting a library, or even a framework, adopting a new build process is rarely a good idea because you’re relegating yourself from expert to novice at a time when you’ve yet to earn your new client’s trust.

Stand your ground. Their approach failed, that’s why you’ve been brought in. You do you.

Who is Licensed?

Any third part code that has been paid for is licensed. Always check who holds these licenses. As well as being legally required, valid licenses are normally required for updates, bug fixes, and in some cases support.

Common pitfalls include: font licenses (which may be licensed under the previous D/D/A’s Creative Cloud, Fontstand, Monotype, etc. account); stock image licenses (which may be licensed for use by the previous D/D/A alone); and plugins (which are frequently bulk-licensed to D/D/As in bundles).

It’s depressingly common to find clients using unlicensed assets. On more than one occasion I’ve had to explain to a client the potential consequences of using pirated fonts.

Fortunately it’s increasingly common for third party providers to attach a licence to a specified domain, which means you may be able to claim the licence on behalf of your client. Major suppliers like CMS and ecommerce solutions frequently have an option for the previous developer to release a licence and allow you to claim it.

In the case of licensing, if you’re unsure, do not be afraid to reach out to the third party provider and check with them if your client is licensed once they break ties with their previous D/D/A.

The only thing that sours a client relationship faster than telling them they need to buy a license they thought they’d already paid for, is telling them they’re being sued for copyright infringement.

Protect your client, and protect yourself, by making sure everything is licensed properly. If you can get something in writing to that effect from the previous D/D/A, do.

Who Has the Research and Analytics?

One of the major benefits of taking over a site, as opposed to building from scratch, is that you have a measurable set of site-specific data to guide your decision making.

This only applies if you have the data, so ask to be added to the client’s analytics account.

There’s a strong chance that the design research carried out by the previous D/D/A is considered an internal document, not a deliverable, by the previous D/D/A. Check with your client: if they paid for the research (is it specified on an invoice?) then they’re entitled to a copy.

We Have a Blog Too…

Clients have a tendency to use the term “website” as a catch-all term for everything digital.

When you take responsibility for a website, you’re almost always expected to take responsibility for any digital service the client uses. That means, newsletter services like Mailchimp, customer service accounts like Intercom, and 227,000 page WordPress blogs that they forgot to mention in the initial brief.

Repeat the whole of Step 2 for every additional app, micro-site, blog, and anything else the client has, unless you are expressly told by the client not to.

Step 3: The Point of No Return

Up until now, you haven’t asked the client to sign on the dotted line. This whole process is part of your due diligence.

By checking these things you can identify unforeseen problems, and potential costs. Are you tied to an obscure build process? Do you need to relicense the CMS? Do you need to recreate all of the site assets?

Some of these conversations are hard to have, but the time to have them is now

If there is any question of the project being more complex than anticipated, have an honest conversation with your client — they will appreciate your transparency, and they’ll appreciate being kept informed. Any client who doesn’t value a clear picture of what they’re paying you for, isn’t a client you want.

Some of these conversations are hard to have, but the time to have them is now, not three months down the line.

This is the point of no return. From this point on, any problems aren’t the previous D/D/A’s, they’re yours.

Change the Passwords

For every service you have, from the newsletter login, to the CMS login, to the FTP details, change the password. (Make sure you notify the client.)

Set Up a Staging Site

You’re going to need a staging site so your new client can preview the work you’ve done for them.

Set the staging site up immediately, before you’ve made any changes to the code. In doing so you’ll discover early on if there are files missing, or issues with the files you do have.

Successfully Transitioning a Project

When a client commissions a site from scratch they are filled with expectation. The fact that they are leaving their previous D/D/A and seeking you out demonstrates that their experience fell short of their hopes.

You now have a client with realistic — perhaps even pessimistic — expectations. You have a benchmark against which your work can be objectively measured.

When problems arise, as they invariably will, never try to blame the previous D/D/A; it was your job to assess the state of play before you started work. If there is an issue with legacy assets, you should have brought it to your client’s attention early on.

If you learn from the previous D/D/A’s mistakes, you won’t be handing the project on to someone else any time soon.

Featured image via Unsplash.

9 novembre 2020/par Service comm.

Popular Design News of the Week: November 2, 2020 – November 8, 2020

Actualités, Actualités, Business

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Gmail’s New Logo is a Mess – This Amateur Designer Fixed it

GitHub Source Code Leak

What’s the Average Web Designer’s Salary? A Deep Dive into 2020

All the Resources You Need for Front End Development

Flat Illustrations – 100 Neat Illustrations for Websites and Apps

15 WordPress Plugins Every Content Creator Needs

9 Essential Elements of a Modern Website Design

30 Classic Ideas that Serve as Logo Design Inspirations in 2020

Color Contrast Mistakes that Weaken Button Hierarchy

How to Improve Conversions Using Color Psychology

20+ Free Design Resources for Developers

CSS Grid Layout Module Level 3

25 Striking Logo Color Schemes to Inspire your Branding

Cirrus V0.6 – A Component Centric CSS Framework for Fast Prototyping

What is the Best Digital Marketing Strategy?

What Should I Build? – Project Ideas for People Who are Learning Web Development

Introducing the 1st Design-to-Development Platform

Free Typography Logo Maker

The Caretaker – A Pure CSS Horror/Puzzle Game

Getting the WordPress Block Editor to Look like the Front End Design

Copying is the Way Design Works

Six Principles of System Design

Apple Silicon Mac Event Announced

4 Types of Sales Visuals that Increase Conversions

Chasing the Pixel-Perfect Dream

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

8 novembre 2020/par Service comm.

Branding 101: Creating the Visual Identity for Your Business

There are so many things to think about when first starting a business. What will your business offer? How will this differ from existing solutions? Who will benefit most from your offering? And why are you so passionate about this?

If you haven’t done so yet, work through this exercise to come up with your brand identity and business name.

Once you’ve figured out your brand identity, you have to create a visual identity — also referred to as brand imagery — to go along with it.

While you could easily throw together visual elements that speak to you, your goal should be to choose visuals that resonate with your audience. So, building your visual identity is going to require some work.

In the following post, we’re going to look at how your brand’s visual style can give off certain signals to those who encounter it (and how to use those to your advantage). We’ll also break down what you need, to piece together your visual identity.

The Power of Visual Identity

Each of the design choices you make that website visitors, social media followers, and customers can see will impact how they approach your brand. Are you a fun-loving company that caters to a younger crowd? Do you create high-tech products that solve serious global problems? Are you a successful entrepreneur who’s reshaping the way we talk to one another?

When done right, our brand visuals convey our brand’s personality, values, and mission without having to use any words.

Think about your favorite clothing brand. What do you picture? Let’s use Athleta as an example.

The logo is probably the first visual element that comes to my mind:

The grey radial shape is one I’m very familiar with. It’s on their website, their social media, and it’s usually imprinted somewhere on their clothing.

The second thing I think about when I think of Athleta is its physical imagery:

Rather than include images of the clothing on its own, there’s often someone wearing Athleta clothes while hiking along a trail, walking on a beach, or working out in a studio.

There’s so much that just these two visual elements tell us about this brand:

Athleta targets active female consumers; we see this in its images and CTAs. The fine touches and shape of the logo may suggest this as well.
Athleta creates understated but highly functional clothing; we see this in the product photos as well as in the brand’s use of neutral colors and fonts across its designs.
Athleta’s mission is to help customers have a healthier and more balanced life; we see this in its product photos, but we also get a sense of this from the simple symmetric structure of the logo.

There are overt ways to use visuals in your branding (usually through your choice of photos or illustrations). But there are also ways to subtly convey more about your company, what it does, and for whom you work through your choice of colors, fonts, structure, and more.

How to Create a Visual Identity for Your Brand

Let’s walk through each of the elements you need to pull together to create your visual identity:

The Color Palette

Like with everything else in business, you’re here to give your audience something they need, so they have to be at the forefront of your decisions — including which colors you put into your brand’s palette.

So, where do you start in choosing a color palette for your site and other marketing channels?

Let’s take a systematic approach.

1. Choose a Primary Color

Go to the Canva color meanings and symbolism tool.

Have a look through the colors and find one that feels good to you. Open up the page and read more about what the color means:

You’ll find the following on each page:

A brief history on the color;
How it’s been used by people over the years;
What it’s symbolized over the years and around the world;
How to use the psychology of the color to affect people (i.e. your audience);
Alternate shades and colors if this particular one doesn’t send the right signals;
Colors that pair nicely with this one.

While it’s important to consider how colors evoke different emotions, it shouldn’t be the only driving force. Your primary focus should be to choose colors that positively affect the user experience. In other words, you don’t want them to get in the way or distract prospects from getting to know your brand and eventually converting.

2. Create a Full Color Palette

Once you’ve picked a primary color, you need to come up with a color palette. You’ll want one or two colors to use in your logo and a full color palette for your website and other branded channels.

You can use Canva’s palette suggestions (in the top-right corner of the color page) to create a basic color palette.

For something a little more robust, use Material Design Palette:

Color options are a bit limited, but it does a good job of spelling out where you should use each color. You can then adjust the color palette as you see fit.

Typography

The design and pairing of your fonts can greatly impact the way people respond to your brand and the words you’ve written about it.

So, the goal with typography is to make your words easy to read while also giving hints about your company’s personality and style.

1. Understand Font Styles

Figure out what style of font goes best with your brand identity.

This is the simplest way to categorize fonts:

Sans serif: These are simple fonts without any “feet” (lines at the ends of letters).
Serif: These are more traditional-looking fonts (the kinds you see in literature and newspapers) with feet.
Script: These are cursive and curly fonts that mimic handwriting.
Display: These are fonts designed specifically to appear in logos, hero images, and advertising because of their large, bold styling.
Monospaced: These are fonts with characters that comprise the same amount of horizontal space, often resembling typewritten text.

You can break these down even further and really get to the root of the style. Fonts.com has a great explainer page on each of these classifications:

Here are some sources to help you find fonts for your brand:

2. Settle on Two or Three Fonts

Choose two or three fonts for your brand. Max. Anything more than that will create a distracting and overwhelming interface for your audience.

You’ll need:

A font for your header text. It needs to look good in big sizes, be easy to read, and easy to identify from other text when scanning through a page or document.
A font for your body text. It needs to look good in small sizes (16 pixels and up) and be highly legible.
Optional: A font for your logo and hero images. It wouldn’t stray too far from the style of your headers, but if you need something a bit more decorative or unique, you can use a different font family for this.

If you find that you need more variety in your fonts to create a clearer hierarchy on the page or to call out certain elements, use superfamilies with dozens or even over a hundred different styles. That way, your users’ eyes won’t get fatigued from having to switch between too many font types.

3. Learn Font Pairing Rules

To pair fonts, use styles that contrast yet complement one another. Ultimately, you want the pairing of your fonts to send a cohesive message to your audience.

For example, a sans serif header and serif body are a common way to combine fonts. Like this pairing of Fira Sans and Merriweather from the FontPair website:

This modern-looking duo sends the message that: “Your comfort is priority #1 for us. Take your time reading and enjoy.”

There are tons of ways to make varying styles play off one another while sending the right signals to your audience: A safe serif with a retro cursive header font to come off as a playful, yet professional brand; a futuristic header and a neutral sans serif body font to give your product pages a very techy feel; and so on…

Once you have one or two fonts you like the vibe of, use FontPair to track down a good complement to the one you want to use.

Imagery

We can use this as a blanket category for any visual content you might use in your branding:

Photos
Videos
Illustrations
Icons
Backgrounds
Textures
Animations or GIFs

But just because there’s all this content to use, that doesn’t mean it should all appear on the same site to represent the same brand. You’ll want to narrow it down based on your company’s personality and how the style of imagery fits with it.

1. Photos vs. Illustrations

You can alter your brand’s voice and style based on the kind of imagery you use.

For instance, tech companies like Stripe often use illustration in their brand designs:

Even though SaaS companies sell one type of product, their audiences are usually quite vast, so it would be hard to find photos that represent everyone. And it’s not like users are focused on their relationships with the people behind the scenes. These companies put technology into the hands of their users, so it’s best to let the product shine and not the people. This opens up the door for some fun and creative possibilities with illustrations.

That said, choosing photos over illustrations doesn’t completely bar you from using vector graphics and icons. You can mix-and-match those visuals so long as they blend well with one another. What you don’t want to do is to mix two very different styles that say different things about your brand at once.

To decide what’s best for your brand, approach this from your users’ point-of-view. What kind of visuals will help them connect to your brand and what you sell?

2. Style

It’s not just the type of image you use that impacts your brand identity. It’s the style you apply to those visuals that can transform your visuals, putting visitors in a different time, place, or headspace.

Will you apply a filter to give your photos a similar look and feel?

Will you place each of your product photos against the same backdrop for a uniform look?

Will you use a completely new style of imagery for one of your product lines the way Apple has done for the iPhone 12?

There’s nothing wrong with using out-of-the-box imagery. However, if they don’t give off quite the right tone, don’t be afraid to use your design skills to make adjustments and cater them to your own style.

Logo

Your logo is the last of the visual elements you’ll need to invest some time in. The good news is that you’ve already done most of the legwork:

You’ve defined your brand’s identity.
You’ve given your business a name.
You’ve selected the main visual components that will represent your brand: colors, fonts, and images.

That’s really all you need to create a logo that is relevant, unique, attractive, potent, and memorable.

That and a way to bring it all together. You have a few options.

Option #1: If you’re a graphic designer, you can create your own from-scratch.

Option #2: If you want help getting started, you can use a tool like Wix Logo Maker:

You’ll fill out a short questionnaire and then receive dozens of pre-made logos to start with. You’ll later have the chance to customize the design to your liking.

Option #3: You can hire someone to design a totally custom logo.

Wrapping Up

In the next post in this three-part series, we’re going to look at the next step:

Getting your business online.

We’ll take everything you’ve done so far in coming up with a business name, brand identity, and now visual identity, and put it towards your website and the marketing channels that are best for your business.

4 novembre 2020/par Service comm.

Everything You Need to Know About Websites And Privacy Laws

When it comes to compliance, website developers need to keep their eyes on more than just ADA regulations and Section 508. Privacy laws are a big consideration and decisions on how to build privacy into a website start with architects.

And that’s exactly what website developers (and designers!) are. They build up attractive, functional websites and apps for their clients. Yes, they work closely with clients, copywriters, vendors, and other professionals to get the job done, but the developers are the ones who put it all together.

That’s why it’s critical that website developers are well-versed in marketing privacy laws — these regulations directly impact the end results of their work. But how does a website architect create a digital platform that honors both user privacy and the needs of their clients?

What Privacy Laws Are Important For Web Developers?

The two biggest privacy laws that web developers need to keep tabs on are the General Data Protection Regulations (GDPR) and the California Consumer Privacy Act (CCPA). Each law has its own unique scope and provisions, but they both shifted the landscape in defining an individual’s rights to their personal data and set mechanisms for how these rights would be protected and enforced.

Each regulation also carries with it fines, fees, and legal measures for non-compliance. These can be substantial. And if that’s not enough, there’s an ever-increasing consumer demand for websites that prioritize privacy and security. Consider these statistics:

82% of Americans surveyed say they are concerned about the security of their online data
79% of adults claim they are very or somewhat worried about how companies use the data they collect about them
63% of Americans believe they understand very little or nothing at all about privacy laws and regulations that are intended to protect their data

How Can Developers Implement These Laws?

Privacy by Design is Critical for Websites

Under GDPR, web developers are required to adopt the Privacy by Design framework, which is a multi-point methodology intended to standardize data protection measures.

Building privacy into websites shouldn’t happen at the end stages. It should start with how the websites are conceptualized in the first place. Here are points to prioritize:

Minimize that data you’re collecting and pseudonymize it to protect data privacy
Are you capturing consent? How? Where?
Integrating security measures to protect data — anytime you capture data or implement a third party product, a security risk is born.
Knowing where you’re introducing privacy and data sharing notices
Implement just-in-time notices to provide consumers transparency and build trust
Giving your users the opportunity to manage their personal data

Let’s look at these a little more closely…

Data Minimization is the Goal

Data minimization is an important principle embedded in GDPR. Data minimization itself is a pretty straightforward concept: organizations should limit how much personal data they collect and only process the information necessary to accomplish their business purposes. Once the data is no longer useful, it should be deleted.

For web developers, this means several things. When it comes to building websites, forms, cookies, and other methods should only ask for essential information. For example, if you are creating a pop-up to collect email addresses, don’t ask for their location unless it’s relevant to the email list and better serving their needs.

How and Where Do You Introduce Privacy Policies and Notices?

Let’s say you take data minimization seriously. That’s great! Now you need to put those data collection practices into words and share them with your customers.

Privacy policies and notices are a big part of both GDPR and CCPA. Both the CCPA and the GDPR mandate that your privacy policy detail why you’re collecting information and how it will be used, as well as what the individual’s rights are and how they can exercise them.

CCPA takes a slightly different angle, requiring privacy policies to disclose if the business sells personal data and what third parties have access to the data. CCPA also dictates that privacy policies and notices are current, updated at least annually. (Nota bene: GDPR also asks for updated privacy documents, but doesn’t specify frequency.)

How does this translate from policy into web development?

If you’re collecting data to improve user experience, allow for targeted ads, or sharing information with third-parties, this information will need to be included in a privacy notice. Remember, CCPA works with a broad definition of selling data, so you may need to account for a “Do Not Sell” link on your home page.
Considering using data beyond these purposes? Plan to obtain explicit user consent for each additional purpose.
What’s your plan for the data after the user gives it to you? Where is it stored? Who has access to it? How long are you keeping it? These are all questions that a website developer should consider, and that needs to go into a privacy notice.

Just-in-Time Notices for Transparency and Trust

Part of Privacy by Design is the use of individual components of your website to create transparency and support compliance. From a development and design perspective, this means you should always be looking for ways to communicate the hows and whys of data collection.

Yes, your privacy policies and notices aid in this, but going beyond these pieces is important. Customers recognize when businesses go the extra mile for them, after all.

So consider implementing just-in-time notices at points where users enter their information. These notices are a chance to share your data collection practices with your users. It’s transparent! It’s open! It aids in consumer awareness!

Keep Users in the Loop

Want to win over your customers? Make it as easy as possible for them to manage their personal data and how it’s being used. This starts with making sure they are aware of why you’re requesting their information and how you’re planning on using it for the website. You should also:

Get user consent — clear and unambiguous user consent — prior to gathering any data at all. This includes cookies.
Don’t pre-tick boxes for consent. Just don’t. (It’s bad practice AND it’s against GDPR.)
Link to all legal documents on the site. Users should be required to agree to them before using the service.
Want to send marketing communications like email newsletters to your customers? Make sure they agree to this. Expressly.

One helpful tool for keeping users in the loop is a marketing preference center. A marketing preference center allows users easy access to their information. From there, they can manage, edit, and delete their information at their discretion.

Bonus? A marketing preference center is an excellent point at which to communicate a business’ commitment to privacy. While users will pick up this through all the discrete elements of privacy on your website, putting it all into one hub that also allows users control over their data really reinforces this message.

Remember, it’s not just on the consumer to manage their data. Web developers should commit to managing the data in their systems. This means they should:

Maintain accurate and clean records of users’ data consent preferences
Send regular reminders to users to update their personal information in your system
If a user deletes their account, promptly delete all of their personal information
If your client goes out of business or is sold, they should delete all personal information in their system

Make it User Friendly

A final point: making your websites user friendly is important regardless of privacy compliance. Users expect websites that don’t make them think deeply about, or worry about, their privacy. Make it accessible and easy. Don’t make people figure it out on their own.

Give them value for sharing their data

Your users don’t have to share their data. They’re choosing to. So in exchange for their personal information, make sure you’re using it to provide a user-friendly website. Offer them a secure, enjoyable experience.

But don’t ask for more than you need

Let’s loop back around to this point again. While consumer data can help you build a better website, don’t plan your websites around it and don’t demand data to create a good experience.

Usability, web design, and website security; all of these things benefit from consumer data. But privacy laws should always guide how any personal data is collected and used, and respect for consumers’ individual rights, and honoring their privacy should be top-of-mind for web developers.

Featured image via Pexels.

30 octobre 2020/par Service comm.

5 Biggest Challenges Web Design Agencies Face

With billions of internet users worldwide spending several hours online each day, the online presence of brands is now a necessary avenue for building, boosting, and maintaining positive value and attracting and interacting with customers.

This has created increasing pressure for web design agencies when creating and managing websites. This pressure is multiplied by all the projects that web design agencies have to handle at one time. This is because different clients demand different things for their websites, whether it’s a signature feature or specialized functionality.

Hence, it’s vital that the tools the agencies use to work are simple enough and suited to the tasks they have to accomplish in order to build and maintain these projects. Having the right tools can increase efficiency and effectiveness in managing websites.

Challenges in Modern Web Design

Building a website with all the essentials in mind is always easier said than done. Websites have to be both functional and easy on the eyes to invite traffic, disseminate information, or appeal a product or service to a target audience, and all while having an attractive and convenient interface.

The good news is that it’s perfectly possible to design a quality website and without spending a fortune to do so. Below are some of the challenges that web design agencies face when trying to deliver and reconcile efficient user experience and effective user interface in web design.

1. Appealing User Experience

Designing a good website means ensuring that the user experience is appealing to a general audience, but this is one of the most difficult parts of web design. Agencies must be careful not to turn off users with a confusing user experience. For instance, making important information difficult to find on web pages, using technical jargon that ordinary users wouldn’t understand, and focusing too much on the design rather than the overall experience are a few big mistakes that no designer should ever commit.

Instead, web design agencies should focus not only on making the design look good but also on making the experience smooth and fast for the regular site visitor. This includes improving design elements to make navigation easier as well as optimizing webpage load speeds.

2. Working With a Budget

It’s common for the client and the web design agency’s budgets to not line up at all times. Either the client will find the project quote too high, or the designer will find the client’s budget too low. The cost of a web design project can vary greatly, depending on what needs to be done.

Although having to build a good website on a budget may be difficult, it’s important for both parties to come up with a set amount before the project even starts. The client should always specify what they want to achieve and how much they’re willing to pay to get it, and the agency should let the client know beforehand if this is possible.

3. Integrating Third-Party Functionality

Sometimes, clients may make requests for third-party functions that may not be easily integrated into the site. To prevent this, web design agencies should always consider integration when building a site. Most businesses and companies now have at least one social media account, so it doesn’t make sense for their site to remain disconnected.

When a website visitor shares an excerpt on a social media site like Facebook, Pinterest, or Twitter, other people who can see their posts may become interested in visiting the original post on the website. Properly integrating third-party applications and functions into a website can get it more online presence and popularity.

4. Suitability to Different Devices

There are many devices that people can use to access the web. From smartphones to desktop computers, from cars to game consoles, and even wristwatches and digital cameras, all of these can be web-enabled as long as there’s an available internet connection.

Websites nowadays should always be compatible with any of the devices people might use to go to the website. They should look pleasing and load fast regardless of what device a visitor is using.

5. Security of Personal Information

Most websites require personal or financial information, whether for account verification, for website subscription, or something else. Websites should be designed with personal security in mind, which is even more important since hacking has been on the rise since the coronavirus hit.

One of the biggest threats that websites face today is phishing, or when an attacker will pretend to be a trusted contact and attempt to compel you to click a malicious link. Another is ransomware, or where cybercriminals hold customer data for ransom and attempt to extort online business owners. Yet one more is SQL injections, or where hackers will attempt to execute malicious SQL commands in your website’s database.

The best practices in regards to web design to mitigate these risks include third-party plugins and themes, keeping all of your software up to date, setting your web applications so they run the fewest privileges possible, and utilizing SSL certificates and HTTPS protocols.

Adopting Site-Building Platforms

Gone are the days where you had to be technologically gifted to design a website from scratch, usually through manual HTML codes. Back then, you had to know your way around the web if you wanted to set-up and manage a site of your own.

Now, there are a lot of good website builders that allow you to create websites in a faster period of time. Even web design agencies now make use of such builders in order to make the job easier and more convenient. Not to mention, it allows agencies to focus on the design alone.

Although these platforms offer predesigned templates based on the most common purposes of websites, they normally allow the user to white label the website into the branding specific to the business or agenda of the website owner. The text styles, colors, and sizes coordinated to the website’s theme, and colors can be designed specifically to match the business or organization’s image and identity.

Simply put, creating websites through a web builder platform can provide web design agencies with easy-to-understand tools that their teams and members can all uniformly use to more effectively and more efficiently handle all their projects.

With services that allow mobile optimization, site management, and even drag-and-drop editing, web design agencies can now better manage their projects and finish with their tasks more quickly.

Not only that, by using white labelling, services can conserve their time and energy into focusing on creating the best website for their client. With all the website builders currently available on the market today, just picking the right one can give web design agencies the best tools to use when creating, designing, and maintaining websites.

Featured image via Pexels.

Actualités, Méthodes et organisation des process IT

23 octobre 2020/par Service comm.

Observability 101: Terminology and Concepts

When I first started following Charity on Twitter back in early 2019, I was quickly overwhelmed by the new words and concepts she was discussing. I liked the results she described: faster debugging, less alert fatigue, happier users. Those are all things I wanted for my team! But I was hung up on these big polysyllabic words, which stopped me from taking those first steps toward improving our own observability.

This post is my attempt to help orient folks who want to learn more about observability but maybe feel overwhelmed or intimidated by the vocabulary list, like I did. My goal is to get everyone on the same page about what these words mean so that we can focus on leveraging the tools and ideas to build better software and deliver more value!

Source de l’article sur DZONE

20 octobre 2020/par Service comm.

Top New CMS Plugins, October 2020

Plugins offer a ton of benefits to developers and website administrators; from flexibility, to saving time in development, the right plugin is priceless to a project.

In this article, we’ll cover a list of the best new plugins for October 2020. You’ll find useful plugins for WordPress, Craft, Shopify, and Joomla.

Let’s get started.

WordPress

Sticky Post Expire

Sticky Post Expire is a simple plugin for WordPress that allows you to add an expiration date to your sticky posts. When the expiration date you set on a post expires, the post will automatically no longer be sticky. All you need to do is install/enable the plugin and a meta checkbox will appear in your posts admin area. It’s in this checkbox you will set the post’s expiration date.

Product page shipping calculator for WooCommerce

The Product Page Shipping Calculator plugin allows your customers to calculate the cost of shipping before adding the product to their cart. The plugin also allows customers to see the available shipping methods for their area. If the product cannot be shipped to the customer’s location, the plugin will notify the customer. All calculations are done using Ajax, so you don’t have to worry about the plugin slowing down your site.

Payment Page

Payment Page makes it easy to collect payments on your WordPress website. The plugin allows you to connect to any payment gateway platform of choice. You can also receive one-time or recurring payments using Payment Page. The plugin comes with beautifully designed templates that you can customize to fit your brand and style. The form builder helps you increase your sales and conversions. You can collect payment in any currency. After payment, customers will also receive a confirmation message.

WP Roadmap

Wp Roadmap is a product feedback board for WordPress. The plugins allow you to display your company’s product roadmap on your WordPress website or blog. The plugin will display your new products, business developments, upcoming events, achievements, awards, and future projects on your site. WP Roadmap also gives you the option to collect and create feedback boards. The plugin comes with an intuitive interface and works with any WordPress theme.

LiveSession

LiveSession is a session replay plugin for WordPress. The plugin allows you to record everything happening on your site, including clicks, scrolls, and mouse movements. This plugin helps you understand how your visitors interact with your website. You can rewatch the videos as many times as you like. Instead of recording every single visitor on your site, LiveSession will record visitors with a high engagement score.

The plugin also comes with a feature called Rage Clicks. This feature helps you identify when visitors encounter Javascript errors. The plugin also has a beta feature called Clickmap. It helps you identify the specific elements on your site that visitors clicked and how many times. There is also a heatmap feature that identifies which pages on your site get the most interaction. The plugin is very useful in improving your user experience (UX) and conversion rates. It easily integrates with Google Analytics, Segment, Intercom, LiveChat, HelpScout, Olark, Wix, Shopify, and WooCommerce.

Auction Feed

Auction Feed makes it easy to display eBay items on your WordPress website. Visitors to your website will be able to search and buy products directly from your site. The plugin comes with a variety of styles to fit any WordPress theme. You can also add a product description above or below the product image. Customers won’t have to leave your website before making their purchases. The plugin is also free to use.

Floating Related Posts

Floating Related Posts is a WordPress plugin that allows you to display a banner with a list of related posts on your website. The banner can appear at the top or bottom of the web page. You can set the banner to pop up using a time filter or scroll trigger. The plugin is also compatible with Google Analytics. You can customize the banner background color, font size, button style, and text color. The plugin can be translated into any language.

Simple Restrict Content

The Simple Restrict Content plugin allows you to restrict the content that visitors can access on your WordPress site. You can choose who can access content on your website by setting up roles. The simple lightweight plugin restricts different content types, including, posts, web pages, and WooCommerce products. The plugin is available in Spanish and English.

Easy Video Publisher

Easy Video Publisher is a WordPress plugin that allows you to easily publish YouTube videos on your website. You can import YouTube videos from multiple channels. You can also schedule the YouTube videos to automatically upload to your website. Note that a YouTube API key is needed to import multiple videos at a time from a specific channel. The plugin allows you to use multiple API keys.

Preloader Awesome

Preloader Awesome is a preloader plugin for WordPress that allows you to create a page preloader interface while the rest of the webpage is still loading. Preloaders are interface elements that notify visitors that your website hasn’t crashed, just processing before serving content. Some of the features of the plugin include 14 page transition styles, progress bar, GIF support, 10+ default CSS loader, progress status counter, unlimited color, and counter font size options. The plugin is responsive and works on all modern browsers.

Menu Hover Effect

The Menu Hover Effect plugin allows you to add hover effects to the menu bar on your website. With this plugin, you don’t need to learn CSS. This plugin gives you 20 CSS menu hover options to choose from. It is a lightweight plugin and won’t affect your website speed.

Better Comments

The Better Comments plugin allows WordPress users to easily customize the comment section of their website. With the plugin, you can customize the look of your comment form fields, match the submit button with the colors of your site, and hide the comment’s date. The plugin also allows you to create a comment policy section. You can further customize the comment fields to highlight when they are selected and typed in. If you find rounded avatars common, the plugin also offers a hexagonal avatar option.

WP Pocket URLs

WP Pocket URLs is a handy WordPress Plugin that helps you manage your affiliate links. The plugin allows users to automatically shorten and track any affiliate link on their website. You can also manually shorten the links on your website. Each time a visitor clicks on a link you get access to information like click date/time, country, IP address, etc. You can also categorize your links and also create custom permalinks. There is also a dashboard widget that displays your top 10 links. On the “Reports” page, you can generate clicks reports. You can filter the reports by Month/Year, link category, country, and link title.

Craft CMS

Formie

Formie is a Craft CMS plugin that allows you to create user-friendly forms. The plugin comes with a drag and drop builder for creating forms. You can store user form submissions in your control panel in case you want to review them later. When a user submits a form, you will get an email notification. Formie also has an in-built keyword blocking feature to protect you from spam. The plugin has several integrationS: API for Elements, Address Providers, Captchas, CRM tools, Webhooks, and Email Marketing software. You can also create your custom integration. You can add over 25 fields to your forms using Formie.

Craftagram

Craftagram is a Craft CMS plugin for adding any Instagram feed to your website. Since the plugin uses the official Instagram API, you don’t have to worry about your website getting blacklisted. Craftagram also handles pagination for your Instagram feed.

Shopify

We’re Open

We’re Open is a handy plugin for Shopify users. The plugin lets your customers know when you are open to receive new orders. Once your business hours are close, customers won’t be able to make new orders. A message will be displayed in your store that you are closed. The plugin ensures that you only receive orders when you are open. It works in any time zone and the API easily integrates with mobile apps.

Punch Metrics

Punch Metrics is a Shopify Plugin that helps you track your store’s visitors and also analyze their behavior. The plugin offers real-time data on your site’s visitors, the pages that see the most engagement, and which devices are the most popular. You can also record and replay visitors’ sessions so you can know exactly what they did on your site. Punch Metrics also has a heatmap tracking feature to understand which elements on your site get the most clicks.

Joomla

Simple Sliders

Simple Sliders is a content plugin for Joomla. The plugin allows users to easily create accordion sliders in their articles. You can add the sliders to your Joomla articles by adding this code:

{slider title="Slider 1 Title" class="blue"}
Slider 1 content.
{slider title="Slider 2 Title" class="red"}
Slider 2 content.
{/sliders}

Jitsi Conferencing

Jitsi Conferencing is a video conferencing plugin for Joomla. The plugin will allow you to host meetings and easily connect with your clients. The module is simple and effective to use.

Featured image via Unsplash.

19 octobre 2020/par Service comm.

How to Get Dark Mode Design Right

Dark themes are everywhere these days.

As human beings continue to spend more of their time interacting with technology, dark themes provide a more relaxing way to engage with the digital world. More often than not, these themes are easier on the eyes, more attractive, and perfect for the dedicated user.

Throughout 2020, countless leading brands have debuted their own version of the dark theme. Google has a solution for your Drive, while Apple and Android have built dark theme performance right into their operating systems.

If you haven’t learned how to make the most out of dark mode yet, then you could be missing out on an excellent opportunity to differentiate your design skills, and earn more clients going forward.

Why Dark Mode?

Before we dive too deeply into the possibilities of creating your own dark theme, let’s examine what dark mode is, and why it’s so effective.

Ultimately, dark themes are created to reduce the amount of luminance emitted by everything from your desktop and laptop, to your smartphone and smartwatch. Dark themes help to improve the visual ergonomics of design, by reducing eye strain, adjusting brightness to suit current lighting conditions, and more. Additionally, many dark mode offerings are also fantastic at conserving battery life.

Here are some of the main benefits of adding dark themes to your design portfolio.

Better user experience: A focus on user experience is one of the most important trends of the digital age. You need to be willing to deliver incredible experiences to everyone who visits your website if you want to stand out today. Dark mode reduces everything from eye strain, to battery power consumption. This helps to keep customers on a website for longer.
Innovation and cutting edge appeal: Most companies want to prove that they can stay on the cutting edge of their industry. The ability to offer an opt-in dark mode version of a website theme or appearance can help your clients to stand out from the crowd. As the environment becomes more mobile-focused, more companies will be looking for designers that can provide the best mobile experiences.
Support for universal design: Dark mode isn’t just great for people who have light sensitivity at night. This solution could be more comfortable for visually-impaired users who would struggle with eye strain when visiting your websites otherwise. If you want your content to be more inclusive for a wider range of viewers, then learning how to design for dark mode is a good way to start.

Best Practices When Designing for Dark Mode

Designing for dark mode is easier than you’d think. Most of the time, it involves simply thinking about how you can replace some of the brighter, more overwhelming aspects of your site, with something deeper and darker.

Here are some useful tips that will get you moving in the right direction.

1. Experiment with Colors

A big issue for a lot of web designers when it comes to developing a dark mode solution is that they get too caught up with things like pure white text against pure black backgrounds. However, this high-contrast option can be a little much after a while.

It’s often much easier to use a dark grey as your primary surface color, instead of a true black. Additionally, rather than using bright white, think about slightly off-white alternatives that will be warmer to the eye.

Experiment with surfaces and color combinations that are unlikely to cause too much eye strain. Dark grey foundations often offer a wider range of depth, too, because you can demonstrate shadows on grey.

Additionally, when you are experimenting with colors, remember that saturated colors often vibrate painfully against very dark surfaces, making them harder to read. Desaturating your colors will help to reduce the contrast and make your websites more welcoming.

Lighter tones in the 200-50 range will have better readability on dark themes. However, you can always experiment with your choices. Google Material Design recommends using a contrast level of around 15:8:1 between your background and text.

2. Consider the Emotional Impact

Much of the effort involved with dark mode design is figuring out how certain colors work together. It’s easy to get carried away with stark contrasts, particularly when you’re used to working with a white background. However, you need to remember that you’re designing for a user that’s primarily looking for an easier and more subdued browsing experience.

While you’re working, remember to consider the emotional aspect of the design too. The emotion in colors can make or break a buyer’s journey in any environment. However, an often overlooked-aspect of color psychology, is that people perceive shades differently when they’re on a black background.

For instance, think of the color green. On a light background, it conveys nature and even financial wealth. However, on a dark background, the same green could come across as something venomous, toxic, or even sickly. It’s important to think about the kind of impressions end users are going to get when they arrive on your site.

3. Give Users the Freedom to Choose

One of the biggest mistakes you can make when you begin designing for dark mode, is thinking that you should focus entirely on your dark themes, and nothing else. This lines you up for a problem if you interact with users who want the best of both worlds. If you’re designing for apps in particular, you’re going to need web pages that can switch naturally between light and dark themes.

Learning how to implement both a dark mode and a light mode option into the desks you create will help you to reach a wider selection of customers. Remember, you’ll need to test the performance and impact of your designs in both themes, to check that they deliver the same kind of experience, no matter how your user chooses to browse.

Although dark mode should offer a different experience to end-users, it still needs to feel as though they’re browsing on the same website. That means that you’re going to need to experiment with the most natural combination of light and dark mode options.

4. Remember the Basics

Remember, although the three tips above will help you to get on the right path for dark mode design, you’ll also need to consider the opportunities and limitations of the platforms that you’re designing for. The kind of dark mode experience you can deliver for Google Chrome websites is going to be very different to what you can create for something running on iOS.

Examining the documentation provided by the system that you’re designing for will help you to develop something with a close insight into what’s actually possible.

Other top tips for dark mode design include:

Focus on your content: Make sure that your content stands out on the page, without being too overwhelming.
Test your design: In both light and dark appearances, you need to make sure everything is working as it should be.
Adopt vibrancy for your interfaces: Vibrancy helps to improve the contrast between your background and foreground.
Use semantic colors: Semantic colors adapt to the current appearance of a website automatically. Hard-coded color values that don’t adapt can seem more aggressive.
Desktop tinting: Try experiment with things like transparency and filters to give your websites and apps a slightly warmer tint – ideal for late-night browsing
Icons: Use individual glyphs and icons for dark and light modes if necessary.

Ready to Design for Dark Mode?

Preparing your web development and design portfolio for an era addicted to dark mode can be a complex experience. You need to think carefully about how people are going to browse through your websites and apps when they’re searching for something more subtle, and less visually overwhelming than the websites that we’re used to making.

The most important thing to remember is that everything on your website or application should look just as beautifully tailor-made in dark mode as it does in light mode. Simply adding a dynamic black background when people want to switch settings in an app isn’t enough. You need to go in-depth with your designs and examine how different fonts, colors, and images work together.