Articles

How to Prioritize Speed with a Mobile-First Design

,

By the end of the year, the number of global smartphone users is expected to reach 3.5 billion. That’s a significant 9.3% increase over the last 12 months.

In a world where everyone is constantly connected to their mobile devices, it makes sense that web developers and designers would need to consider new rules for how they create engaging experiences. After all, most of us find browsing from our smartphones to be much more convenient than sitting down at a laptop each day.

With a little luck, you’re already taking steps to mobile optimize your website but standards are changing all the time. To make sure your website is up to scratch, here’s your guide to prioritizing your site for mobile, ready for the new year.

Understanding Mobile-First Design

The first step in updating your web design and development principles, is understanding the concept of mobile first design, and how it’s changed.

With a responsive website, you create something that adjusts to the screen size of any device; with a mobile-first site, you’re focusing first-and-foremost on the user experience that people get when they’re on mobile, taking that as your starting point, and building from there. Instead of building your website for the desktop and using mobile as an afterthought, you start with a consideration of mobile.

Even Google is highlighting the demand for this process lately, with the mobile-first indexing algorithm. If you can’t design for mobile-first, then you could risk your clients being unable to rise up the search engine ranks.

So, how do you get started?

1. Start With the Right Tools

Web developers and designers are nothing without a great toolkit.

The good news is that there are solutions out there that can help you to master the right skills for a mobile-focused user experience. For instance, Skeleton is excellent for small-scale projects that require fluid grids and minimal compiling.

Alternatively, Bootstrap can offer a one-size-fits-all solution for the front-end development for mobile devices. There’s a default grid system available, plenty of components, and JavaScript plugins to work with.

With the right tools, you can minimize and prioritize the content that’s most valuable for your website projects. This is crucial for maximizing website speed and creating clarity when it comes to content and imagery.

For instance, check out the ESPN website; it’s split into very easy-to-follow categories of content that are perfect for scrolling on a smartphone. The grid of videos makes it feel like you’re using a tool like YouTube.

2. Prioritize Mobile-First Elements

Once you have the right tools to assist you, it’s time to begin building your mobile-first website from the ground up. Rather than jumping straight into considerations of the latest design trends, it’s important to start with the foundations.

For instance, navigation within a mobile page is usually hidden under a hamburger button. However, you can take this concept to the next level too. For example, the Shojin mobile website only demonstrates the most important website options within the navigation bar to avoid overwhelming users.

The key here is to keep things as simple as possible, without restricting what your audience can do when they visit your website. Although you want to keep the number of interactive elements on your site small, you also need to ensure that those elements are easy to find and use.

All buttons and CTAs should be clear and tappable. Fonts need to be large enough to read from any screen, and your navigation system needs to be 100% simple, without slowing anything down.

On average, we recommend making all clickable elements at least 48 pixels in height.

3. Use Responsive Imagery and SVGs

Images are a crucial part of any website. They add context and appeal to your design. However, they can also seriously slow down your website if you’re not careful.

Remember, different devices have different demands when it comes to imagery. A desktop page may need a 1200px wide image, while a mobile-only needs the image to be 400px wide at most. The old way of making your images work was to load a large resolution image and use the same file on every platform. Unfortunately, this slows downloading time significantly.

Instead, it’s better to have at least two different versions of the same image for your mobile and desktop solutions. You can also consider SVG.

SVGs are incredibly scalable – more so than bitmaps. With SVG, you can ensure any icon or graphic continues to look sharp and clickable across all devices. Because these files are often smaller, your site loads quicker too! Hubspot is great at using SVGs.

Intricate illustrations are a massive component of HubSpot’s brand. If those images were saved as PNGs or other alternative files, then they would take forever to load. Because they’re all SVGs, you can enjoy the same consistent experience across desktop and mobile.

4. Get the Typography Right

It’s not just the big graphics and images that make a huge difference to your website when it comes to mobile-first design. You also need to think about the legibility and clarity of your website across all devices and platforms. If people can’t read the value proposition of the company that you’re designing for, you’re going to have a major problem.

Focus on making your content as easy to read as possible. Look into the typefaces that seem most appealing on a range of devices.

Remember to balance the body and heading font sizes for the device size too. You’ll need to ensure that the experience feels consistent and smooth as your users scroll through each page. Just take a look at the mobile version of the IMPACT website, for instance.

The headings aren’t as huge as they are on the desktop version of the website, and they’re displayed below, rather than above the featured image. However, this helps to give a more immediately eye-catching and structured experience to mobile users.

There’s even a handy “Search Engine Optimization” tag included, that users can click on if they want to find more related articles.

When it comes to typography, remember that it’s not just size and clarity that matter, but how things are structured throughout your website too. Your type should naturally guide your visitors along the page.

5. Master Available Device Features

Finally, on smartphones, you can accomplish a range of amazing things that you might not be able to do when using a desktop device. Your users can make calls, open apps, send messages, and more, all from within their mobile browser. They can also move their smartphone around a room, taking advantage of concepts like AR and VR.

Taking advantage of the unique capabilities that smartphone design can offer gives you a chance to get unique with your user experience.

Making the most of the mobile experience can be much simpler than you’d think. For instance, on a desktop site, you could list your phone number on a contact page. On a mobile site, the number can begin a call when clicked. You can also take the same approach with email addresses, and social media icons too.

Depending on how experimental you feel, there’s also plenty of opportunities to go above and beyond with your mobile features. You may decide to create a mobile app version of a website that your customers can download onto their phones.

Alternatively, you can look into things like AR technology. This could allow your users to practice placing items of furniture that they may be thinking of buying from an online retailer into their house, so they can see how well they work with their other interior design choices.

Making the Most of Mobile-First Design

Ultimately, having a responsive website that works on both mobile and desktop devices is mandatory in the modern world. However, going above and beyond with mobile-first design is a great way to get ahead of the game.

If you can focus on building a website that puts the experiences of mobile users first, then you can create something that’s much more likely to grab audience attention and deliver amazing experiences.

If nothing else, showing your clients that you have what it takes to design for mobile is an excellent way to ensure that you can gain as many new project opportunities as possible.

Source


Source de l’article sur Webdesignerdepot

/par

10 Reasons Your WordPress Site Will Get Hacked (and How to Stop It)

,

A hacked WordPress site is as damaging as having your home burgled. It can completely shatter your peace of mind and adversely impact your online business. 

Why do hackers target WordPress sites? The answer is relatively simple: WordPress is the single biggest platform for website creation these days, so there’s a larger base to attack; this attracts the attention of online criminals. 

So, how can a hack impact your website? 

Depending on the type of attack, your website could suffer any of the following:

  • It could be defaced completely;
  • It could load or operate very slowly on any device;
  • It could completely crash and malfunction;
  • It could display the dreadful “White Screen of Death”;
  • Its incoming visitors could be redirected to other suspicious websites;
  • It could lose all your valuable customer data.

This list is not exhaustive but you get the idea.

Now that we know how a successful hack can impact your website and online business, let us look at the top 10 reasons behind WP hacks and prevent them.

1. An Insecure Web Host 

Like any website, WordPress is hosted on a web host or server. Unfortunately, most site owners do not pay much attention to the web host they select and choose the cheapest they can find. For example, it is more affordable to host a website on a shared hosting plan — one that shares its server resources with many other websites like yours.

This can make your site vulnerable to hackers as a successful hack into any website on the shared server. A single hacked site can consume the overall server bandwidth and impact all the other sites’ performance.

The only way to fix this problem is to opt for a reliable host and a virtual or dedicated server.

Pro tip: If you’re already using a shared hosting plan, check with your hosts if they offer VPS hosting and make the switch.

2. Use of Weak Passwords

Weak passwords are the main reason behind successful brute force attacks that target your account. Even to this day, users continue to use weak and common passwords like “password” or “123456”; if you’re one of them, your website could land in trouble!

Guessing weak passwords allows hackers to enter the admin accounts where they can inflict the maximum damage.

How do you fix this problem? Simple, ensure all your account users (including admin users) configure strong passwords for their login credentials. With at least 8 characters, passwords must be a mix of upper- and lower-case alphabets, numbers, and symbols. 

For added safety, install a password management tool that can automatically generate and store strong passwords.

Pro tip: You can use a plugin to reset passwords for all your users.

3. An Outdated WP Version

Outdated software is among the most common reasons why websites get hacked. Despite being free to download, most site users defer updating their site to the latest version, for fears of updates causing their site to crash.

Hackers take advantage of any vulnerability or bug in an older version and cause issues like SQL Injections, WP-VCD Malware, SEO Spam & other major issues like website redirecting to another site.

How do you solve this problem? When you see a notification about an update on your dashboard, update your site as soon as possible.

Pro tip: If you are worried about updates crashing your live website, you can first test the updates on a staging site.

4. Outdated WP Plugins and Themes

Similar to the previous point, hackers also take advantage of outdated, unused, or abandoned plugins and themes installed on websites. With over 55,000 plugins and themes that are available, it is easy to install a plugin or theme, even from unsafe or untrusted websites. 

Plus, many users do not update their installed plugins/themes to the latest version or do not find the updated version. This makes it easier for hackers to do their job & infect sites.

How do you avoid this problem? As with the core WP version, update each of your installed plugins/themes on your site regularly. Take stock of all the unused ones and remove them or replace them with better alternatives.

You can update your plugins/themes from your hosting account.

Pro tip: We suggest setting aside time every week to run updates. Test them on a staging site and then update your site.

5. Common Admin Usernames 

In addition to weak passwords, users also create common usernames that are easy to guess. 

This includes common usernames for admin users like – “admin”, “admin1”, or “admin123”. Common admin usernames make it easier for hackers to get into admin accounts and control backend files in your WP installation.

How do you avoid this problem? If you are using any such usernames that are easy to guess, change them immediately to a unique username. The easiest way of doing it is through your hosting account’s user management tool, by deleting the previous admin user and creating a new admin user with a unique username.

As the first step, change the default username of your admin user and limit users who have administrator privileges.

Pro tip: WordPress has 6 different user roles with limited permissions. Only grant admin access to users who really need it.

6. Use of Nulled Plugins/Themes 

Coming back to the importance of plugins/themes, users have access to many websites that sell nulled or pirated copies of popular and paid plugins and themes. While these are free to use, they are often riddled with malware. They can compromise your website’s overall security and make it easier for hackers to exploit. 

Being a pirated copy, nulled plugins/themes do not have any available updates from its development team, hence will not have any security fixes.

How do you fix this problem? Simple, for a start, only download original plugins and themes from trusted websites and marketplaces.

Pro tip: If you don’t wish to pay for paid or premium plugins and themes, opt for a free version of the same tools that will have limited features but are still safer to use than the nulled version. 

7. Unprotected Access to wp-admin Folder

To take control of your site, hackers often try to break into and control your wp-admin folder in your installation. As the website owner, you must take measures to protect your wp-admin directory.

How can you protect your wp-admin folder? First, restrict the number of users having access to this critical folder. Additionally, apply for password protection as an added layer of security for access to the wp-admin folder. You can do this using the “Password Protection Directories” feature of the cPanel in your web host account.

Pro tip: Besides these fixes, you can also implement Two Factor Authentication (or 2FA) protection for all your admin accounts.

8. Non-SSL Website

You can easily migrate your HTTP website to HTTPS by installing an SSL certificate on your site. SSL (or Secure Socket Layer) is a secure mode of encrypting any data transmission between your web server and the client browser.

Without this encryption, hackers can intercept the data and steal it. Plus, a non-secure website can have many negative implications for your business – lower SEO ranking, loss of customer trust, or a drop in incoming traffic.

How do you fix this problem? You can quickly obtain an SSL certificate from your hosting company or SSL providers. It encrypts all data that is sent from and received by your website. 

Pro tip: You can get a free SSL certificate from places like Let’s Encrypt, but these provide limit protection that will only be sufficient for a starter site or small site.

9. No Firewall Protection

Lack of firewall protection is another common reason why hackers can bypass website security measures and infiltrate the backend resources. Firewalls are the last line of defence against hackers and work like the security alarm installed on your house. Firewalls monitor web requests coming from various IP addresses, including the suspicious (or bad) ones. 

They can identify and block requests that are known to be malicious in the past, thus preventing easy access for hackers to your website domain. Web application firewalls can thwart various attacks, including brute force attacks, XSS, and SQL injections.

Pro tip: A firewall provides much-needed security and is  your first line of defence. But it’s important to also have a malware scanner installed.

10. Lack of WordPress Hardening Measures

Typically, hackers target the most vulnerable areas or weaknesses within a WP installation, to illegally access or damage the website. The WordPress team has identified these vulnerable areas and has devised a list of 12 hardening measures recommended for every website.

A few of these include:

  • Disabling the File Editor;
  • Preventing PHP execution in untrusted folders;
  • Changing the security keys;
  • Disallowing plugin installations;
  • Automatic logout of inactive users;

How do you implement these hardening measures? While some steps are easy to understand, others require the technical expertise of how WordPress works. 

Pro tip: You can implement hardening measures on your own. However, some measures require technical expertise so in these cases, it’s much easier and safer to use a plugin.

 

Featured image via Pexels.

Source


Source de l’article sur Webdesignerdepot

/par

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.

Source


Source de l’article sur Webdesignerdepot

/par

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.

Source


Source de l’article sur Webdesignerdepot

/par

Finding Your Way With Domain Mapping

,

It’s no secret that having a custom domain name is an essential piece of any company’s branding strategy. While there are a myriad of hosting plans available that offer domains like your company.webhost.com, making the shift from one of those to simply yourcompany.com is an important step.

However, your domain branding strategy need not end there. Domain mapping offers an opportunity for web developers and online business owners the ability to improve their marketing campaigns, protect their brands from competitors, cut down on costs, and develop a more efficient workflow.

What is Domain Mapping?

Domain mapping refers to how visitors to your website are directed to different domains and subdomains and what URLs will be displayed in the visitors’ browsers.

When you first set up your online business, one of the very first things that you do is register a domain name for your company website. But depending on the business, it could be wiser to actually register multiple domain names at once. This is because you will want to lease the primary domain name you plan on using in addition to all related TLDs. This way, cybersquatters will not be able to hold your domain name hostage, especially once you have grown into a more established brand.

For example, if you register the name yourcompany.com, you might also want to register yourcompany.net and yourcompany.org. Then you might set up a URL redirect so that visitors to the latter two sites will be redirected to yourcompany.com. However, with a domain redirect, visitors to yourcompany.net and yourcompany.org will be redirected to yourcompany.com, meaning the URL in their browser will appear as yourcompany.com no matter what they typed.

With domain mapping, this isn’t the case. A visitor to yourcompany.net will still see that URL in their browser even if the content is actually being hosted on yourcompany.com.

Benefits of Domain Mapping

Although domain mapping may seem a bit esoteric and complex at first, it serves several purposes and offers many benefits:

1. Make Web Addresses Easier to Remember

Imagine that your restaurant chain, Larry’s Lunches, just opened a new chain on 116th Street in New York City. Your first instinct may be to direct customers to larryslunches.com/116thstnyc, but that domain is a bit long and hard to remember. Instead, you might want to register the domain larrys116th.com for customers for that specific store.

With domain mapping, you can serve up the content from your main domain, larryslunches.com, while still having your visitors see larrys116th.com. This makes it easier to brand your sites without having to manage several different sites.

2. Boost Your Web Development Career

If you are a web developer yourself but are not admittedly well-acquainted with domain mapping already, you would do well to change that.

One of the easiest ways would be to look at online web development programs that one can take to read through documentation to get caught up to speed on how domain mapping can help their efforts and how to implement it. These kinds of programs can be more comprehensive than university courses and offer an impressive 88% job success rate for those who successfully complete the programs.

3. Shield Your Brand from Competitors

Remember, it’s a good idea to purchase several different related domains in anticipation of competitors snatching them up from you. Choosing the right domain names is essential to protecting your brand.

For example, Larry’s Lunches might want to snag larrysnyclunches.com and larrysfamouslunches.com as well. However, simply leaving those domains parked can be a bit of a waste, and managing multiple domains can be a pain in and of itself.

But with domain mapping, you can manage those domains just as easily as if they were your primary site, so you no longer need to leave them empty.

4. Save Time and Lower Development Expenses

Development isn’t cheap, and time is money. While the maintenance costs for a website are already high enough, adding in separate domains can sometimes break the bank due to the increased complexity of managing so many different moving pieces.

Domain mapping can lower expenses and save time by keeping everything tidy and in one place. By managing everything from a single WordPress installation, for example, you can push updates to all your subdomains at once, saving you from the tedium of going through each domain and making the same updates.

5. Manage Client Sites from One Place

If you’re a freelance developer or run an agency, using domain mapping for some of your clients’ sites can save you time as well. For example, if several clients want blogs, and you use the same infrastructure for them, you can easily push updates and changes to all of them at the same time. In short, domain mapping can make maintaining sites much easier and quicker.

How to Implement Domain Mapping

If you’re sold on the benefits of domain mapping, here’s a quick primer on the steps you’ll need to take to get started:

  1. Choose a domain registrar: The ideal registrar you choose should come with a number of important features including adequate hosting for keeping your website visitor friendly, SSL certification to ensure security, 24/7 customer support, comprehensive packages that make it easy to operate your online business.
  2. Register the domains you’re interested in: These can either be domain misspells (otherwise known as typosquatting), like youcompany.com, yourcmpany.com, etc, or related domains like yournewproduct.com, yournewlocation.com, etc. Whatever you decide to go with, you’ll need to have it registered before you can get started.
  3. Install WordPress Multisite: WordPress is one of the easiest ways to develop websites, and that holds true for domain mapped sites as well. Plus, considering WordPress sites account for over a third of the entire internet, you can’t go wrong with the famed CMS. All you need to do is install WordPress and, once that’s installed, open wp-config.php and add define(‘WP_ALLOW_MULTISITE’, true) above the /*.
  4. Configure your DNS settings: Next, you’ll need to point all your name servers to your hosting account. These changes can take up to 72 hours to go into effect.
  5. Add domains to your hosting plan: From your hosting platform, you’ll need to link your custom domains. You can usually do this from your cPanel.
  6. Map subsites to your custom domains: Once you have your domains set up, you’ll need to link them through WordPress. To do so, simply login and navigate to Sites -> Add New. After you assign them a subdomain or subdirectory name, you can click Edit and add your custom domain. Then just hit Save Changes, and you’re good to go.

Take note that domain mapping is not necessary for transferring a domain name. When you map a domain, you’re simply telling your domain where it can find your website on the internet through having your name servers updated. When you change your name, it only affects where the domain has been resolved.

The Bottom Line

While domain mapping isn’t necessary for all websites, it can still be a major timesaver. By utilizing it properly, you can greatly improve the standing of your online business by saving time and money, making website management easier, and improving the branding of your sites.

 

Featured image via Unsplash.

Source


Source de l’article sur Webdesignerdepot

/par

8 Design Secrets of B2B Vs B2C Websites

Web design clients come from a wide variety of backgrounds. One day, you’ll be designing a portfolio website for a voiceover artist, the next you’ll be creating a comprehensive ecommerce site for a leading retailer. In an ideal world, you’ll get to a point where you eventually specialize in a niche. However, you’ll need to master both avenues first.

The more time you spend in this industry, the more you’ll learn that every client comes with their own unique requirements and challenges to consider. However, there’s a particularly huge divide between the kind of web design projects you do for B2B clients, and the ones you do for B2C customers.

Both B2B (Business to Business) and B2C (Business to Consumer) websites need to be clear, concise, and aesthetically pleasing. They should always have a strong focus on user experience, and they need to work consistently across devices. However, being aware of the difference between B2B and B2C projects will help you to deliver better results to your customers.

Defining the Differences Between B2B and B2C Sites

Some web design trends remain consistent in any environment.

Whether you’re creating a site for a hairdresser, or a leading SaaS company, you’ll need to deliver responsive design, intuitive navigation, and excellent site security.

Your process is unlikely to differ from B2B to B2C much in terms of project milestones, phases, prototyping and wire-framing. The differences that arise between B2B and B2C projects often come in the approach you take to building certain elements.

Let’s take a closer look at the things you might need to consider:

1. The Target Audience

In any design project, it’s always important to keep the end customer in mind. Knowing your client’s target audience will help you to create both an image and a tone of voice that appeals to the right people.

B2B Websites

With B2B websites, you’ll be speaking to a range of highly-educated individuals who already have a general knowledge of your service. The aim here will be to show the end-user how you can help them achieve better results. For instance, m.io highlights “syncing communication” so you can “effortlessly chat” with your team.

The language and content of the website is all about highlighting the key benefits of the products, and the kind of outcomes that they can deliver. The Nielsen Norman Group reports that there’s often a lot of discussion between decision-makers when they’re checking out a B2B website.  

Designers need to work harder at convincing B2B buyers that they’re making the right decision. This is particularly true when you’re selling something like a software subscription that requires a lot of long—term investment.

B2C Websites

On the other hand, while B2B customers make decisions based on logic, information, and well-explained benefits, B2C customers are more influenced by emotion. They want quick solutions to their problems, and the opportunity to purchase from a brand that “understands” them.

Look at the Firebox website, for instance. It instantly highlights an ongoing sale at the top of the homepage, addressing any concerns a customer might have about price. That combined with a quirky layout full of authentic photos and bright colors means that customers are more inclined to take action.

2. The Purpose

Another factor that can vary from B2C to B2B websites, is the motive behind a customer’s purchase. Knowing what’s pushing a target audience to interact with a brand will help you to create a website that appeals to specific goals.

B2B Websites

B2B websites often aim to solve expensive and time-consuming problems for companies. To sell a decision-maker on the validity of a solution, it’s important to thoroughly explain what the solution is, how it works, and how it addressees a specific pain point.

Look at the Zoom website for instance, they don’t just tell people that they offer video conferencing, they address the practical applications of the platform:

B2C Websites

Consumers are a lot easier to appeal to in terms of emotional impact, because many of them come to a website looking to fulfill an urgent need. Because of this, many web designers can take advantage of things like urgency and demand to encourage conversions. For instance, look at this website from TravelZoo. It takes advantage of a customer’s desire to get away:

A B2B website needs to focus on providing information that helps companies to make more confident decisions. What’s more, with B2B sites, decisions are often made by several stakeholders, while B2C sites ask a single person to make a choice. A B2C website needs to address immediate concerns and connect with customers on an emotional level. B2C buyers still want to do their research on products or services, but the turnaround is much quicker, and often requires less information.

3. The Design Elements (Visual Appearance)

Just as the focus of your website design and the audience that you’re creating the experience for can differ from B2B to B2C websites, the visual elements of the design might change too.

B2B Websites

In most cases, B2B websites are all about presenting a highly professional and respectable image. You’ll notice a lot of safe and clear choices when it comes to typography and imagery. It’s unusual to see a B2B website that takes risks with things like illustrations and animations.

Look at the Green Geeks website for instance. Everything is laid out to encourage clarity and understanding. Information is easy to find, and there are no other issues that might distract a customer.

B2C Websites

On the other hand, B2C websites can be a little more daring. With so many different options to choose from, and most customers buying out of a sense of urgency or sudden demand, designers are under pressure to capture attention quick. This means that it’s much more likely to see large pieces of eye-catching imagery on B2C sites, with very little text.

Movement, like slideshows and animations often play more of a role here. Additionally, there’s a good chance that you’ll be able to experiment more aggressively with color. Take a look at the Yotel website, for instance. There’s very little textual information here, but the appeal of the website is conveyed through sliding images:

4. Website Content

The way that information is conveyed on a B2B website is very different to the messages portrayed on a B2C site. Usually, everything from the language, to the amount of content that you use for these projects will differ drastically.

B2B Websites

When designing for a B2B website, you’ll need to be careful with content, as you’ll be speaking to a very mixed audience. If your site caters to different industries, you’ll need to ensure that you show authority, without using too much jargon. Some companies even create different pages on their site for specific customers. The aspin.co.uk website covers the benefits from a company, sale and integration perspective:

Rather than try to talk to all business owners about their differing communication pains, G-Suite anticipates its audience and creates pages for each.

B2C Websites

Alternatively, B2C websites can make things a little simpler. For instance, on glossybox.co.uk, there’s no need to provide a ton of information for different types of shopper, designers can appeal to one audience, i.e. the “beauty addict”:

In both B2B and B2C websites, the aim of the content should always be to answer any questions that the end user might have.

5. CTA Buttons

Call to Action buttons are often a crucial part of the web design journey. However, it’s sometimes difficult to determine where they should be placed, or how many buttons you need.

B2B Websites

Because the decision to buy something won’t always happen immediately with a B2B website, these kinds of sites often use a variety of CTAs. For instance, you might have a “Request a Quote” button at the top of a page, as well as a Sign in button.

On the Klaviyo site, for instance, you can request a demo, sign up or log in:

You can place CTAs lower on the page with B2B websites too, as it’s more likely that your customers will be scrolling through the site to collect more information before they decide to buy.

B2C Websites

On the other hand, with B2C websites, you usually don’t need to give your visitors as many options. A single option to “Add to Cart”, or perhaps an extra choice to “Add to Favorites” is all your user will need. Customers need to instantly see what they need to do next as soon as they arrive on a page:

On the Evil Hair website, you immediately see how to add a product to your cart.

Remember, the sales process is a lot quicker with B2C customers. This means that you need your CTA buttons to be front and center as soon as someone clicks on a page.

6. Contact Forms

In a similar vein, the way that you design your contact forms will also depend on the end-user that the website wants to appeal to. There’s a very different process for getting in touch on a B2B website, compared to a B2C site.

B2B Websites

B2B websites often require longer contact forms, as clients need to collect additional information about a prospect’s position in a company, and what that company does. B2B companies need to share things like what they’re looking for in a service, and how many users they have, so a sales team knows what kind of demonstration to give.

As with any strategy for contact form design, you should always only include the fields that your client needs and no more. If you demand too much from any client, you could send them running in the opposite direction. Check out this straightforward option from Ironpaper, for instance:

The form addresses as many relevant questions as possible without overwhelming the customer. Because the site handles things like design, it makes sense that they would ask for a link to the company’s existing website.

B2C Websites

On a B2C website, there are very different approaches to contact forms. You may have a dedicated contact form on your website where people can get in touch if they have any questions. A FAQ page where customers can serve themselves is another great way to help your client stand out from the competition. Check out this option from River Island, for instance:

On the other hand, you might implement pop-up contact forms into a website if your client wants to collect emails for email marketing. In that case, it’s important to make sure that you’re only asking for the information you need, and nothing more.

The easier it is to sign up for a newsletter, the more likely it is that customers will do it. Being able to enter their name and email address and nothing else will make the signup seem less tasking.

7. Search Bars and Navigation

Whether you’re designing for B2B or B2C companies, navigation will always be a critical concern. End users need to find it easy to track down the information that they need about a company, whether they’re looking for a particular product or a blog.

B2B Websites

On a B2B website, the search bar often takes up a lot less prominence than it does on a B2C site. That’s because all of the information that a client needs, and the buttons they need to take their next steps, are already visible front-and-center.

As a designer, it will be your job to push as many people to convert as possible, by making the purchasing journey the most appealing path for visitors. For instance, on the Copper website, the “Try Free” buttons are much easier to see than “Continue with Google” or “Login”:

With B2B sites, the focus is on a very specific goal. Although navigation still needs to be available, it doesn’t need to be as obvious as it is on a B2C site.

B2C Websites

On the other hand, most B2C websites offer a wide range of products, and they’re perfectly happy for their customers to purchase anything, as long as they eventually convert. Because of this, they make navigation a much more significant part of the customer journey.

The search bar is often presented at the very top of the screen where customers can see it immediately. Additionally, there may be multiple pages within certain product categories, so that customers can browse through the items they’re most interested in. For instance, look at the homepage on the IWoot website:

The navigation elements in B2C websites need to be a lot more obvious, because consumers are more likely to use them when they’re searching through their options.

8. Social Proof and Testimonials

Finally, social proof is one of the things that will work well for improving conversions on any kind of website. When your customers aren’t sure whether or not they should buy from you, a review or testimonial could be just the thing to push them over the edge.

B2B Websites

On a B2B website, the decision-making process takes a lot longer. Because of this, it’s worth including as much social proof as possible in every part of the website. Client testimonials, reviews and ratings, and even high-profile company logos make all the difference. Many B2B websites include a page dedicated to case studies highlighting the success of other brands.

Your client might even go as far as to ask for a page that highlights their awards and recognition or showcases comparison tables that pit their products against the competition.

For instance, Authority Hacker has a “what the pros say about us” section as social proof:

B2C Websites

With a consumer website, you can include consumer ratings and reviews wherever you like. However, it’s most likely that you’ll want to have a place where customers can see the reviews of other clients on the product pages themselves. On the EMP website the company gives users the option to click on the star review section to jump to a different space on the page where testimonials are listed. This ensures that customers don’t have to scroll through a lot of excess information if they just want to add an item straight to their cart.

Designing for B2B vs B2C

In the world of web design, no two customers are ever the same. While you’ll need to adapt your processes to suit each customer you interact with, you can set your expectations in advance by learning the differences between B2B and B2C strategies.

 

Featured images by Chris Ross Harris and Mike Kononov.

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;}

Source de l’article sur

/par

Hacking Your Home

,

So, I’ve been looking a little deeper into what I have running on my network over the past day or so, and I found a few interesting things. I covered the most interesting things I found in my last piece, as well as some initial scans of the equipment I found. I had a couple of interesting addresses on my NAT LAN, at .128, .131, and .147.

I have no idea what’s running at .128. Whatever it is, it has absolutely no ports open, and believe me, I’ve looked over them all (nmap … -p-65535 is your friend). I ran all the usual suspects from the script library too, and it doesn’t register any vulnerabilities nor has it been hooked by any known malware. I’m going to need to figure out another way to get to whatever that is.

Source de l’article sur DZONE

/0 Commentaires/par