Coming soon…

The General Data Protection Regulation, or GDPR, changes how your business gathers information. In this article, we’ll look at how it affects your site and what steps you might take to comply.

 

Summary

• The GDPR is a new set of EU regulations intended to provide greater control of personal data to website visitors and improve access to what is collected, why it is collected, and how it is used.
• Regulations apply starting May 25, 2018
• If you use analytics, lead generation forms, contact forms, comment systems, or other common marketing tools on your site, and an EU citizen visits your site, you could have compliance concerns.
• Maximum fines for non-compliance are 4% of annual global turnover or €20 million.
• You should perform an information audit on your site and determine what information you collect. If it is non-essential, the best option might be to stop collecting the information.
• Otherwise, you must outline all information you collect in your privacy notice and provide options for users to request deletion of their data. In many cases, you’ll also need to get their consent to collect the information.
• While details are scant as of the time of writing, WordPress plugins are available to address many of the common concerns.

DISCLAIMER: We’re not lawyers. With the complexity of both these new regulations and how they’ll impact the endless number of site configurations, marketing funnels, and businesses operating online, it would be impossible to cover every facet of the concerns surrounding GDPR compliance.

While we will cover what we can, and make our best effort to provide accurate, actionable information as of the time of writing, this is not to be construed as legal advice. Consulting with a legal expert familiar with GDPR regulations is encouraged before enacting major changes to your site or considering your site compliant with new regulations.

 

What Exactly is the GDPR?

The specifics of GDPR are still emerging as experts analyze the 90+ pages of the legislation.

But one thing is certain…

It will create ripples for sites and businesses around the world.

So what is this GDPR exactly and how does it affect you?

We’ll be honest — the exact details are still a bit sketchy. The regulations cover so much ground and do so, in many areas, in a rather vague manner…

But in a nutshell, the GDPR is new EU legislation that establishes strict guidelines on how you can collect and use the personal information of your website visitors and customers.

It goes into effect on May 25, 2018.

Platforms such as WordPress and much of the web development community are still working hard to adapt to the upcoming changes.

Due to its ever growing popularity, we’ll be focusing on WordPress for this guide. However, if you use any modern CMS platform, there’s a good chance that regulations will still impact you.

Will the GDPR Apply to My Site?

Do you still have to worry about GDPR if you’re not in the EU?

The answer is “most likely”.

The new regulations won’t simply impact EU sites and businesses.

The GDPR impacts anyone doing business with EU residents and collecting or processing their personal data — even if only occasionally.

What is personal data exactly?

Regulations define it as:

“Any information relating to an identified or identifiable natural person”

In normal words, this includes names, email addresses, physical addresses, IP addresses, social security numbers, and other commonly recorded bits of data.

There’s also sensitive personal data.

This is a subset of personal data that includes demographics and analytics information such as race, health information, sexual orientation, religious preferences, and political beliefs.

But what uses personal data on your site?

Common features in WordPress that might use personal data include:

• User registrations
• Cookie notifications
• Contact form entries
• Mailing list subscription forms
• Lead generation pages and forms
• Analytics
• Server and traffic logs
• Security tools and plugins
• Comments
• CRM plugins
• Event calendars and booking plugins
• eCommerce plugins

Even if you only collect this information through a third-party service, it’s important to ensure that the vendors and services you use are also GDPR compliant.

Needless to say, the actual regulations are full of legalese and are not a light read. There are also still some grey areas — particularly surrounding cookies — that have yet to be clarified.

And, in some cases, there is intentional ambiguity to provide flexibility in how businesses deal with compliance concerns.

But with that ambiguity, it is hard to make exact recommendations on meeting requirements.

We expect more concrete information will become available closer to the deadline as more third-party service providers and platforms work to comply with the new regulations.

For example, MailerLite, Drip, and MailChimp already offer posts to help explain how to use their tools in a GDPR-friendly way as far as email is concerned. They also outline steps they are taking on their end to ensure compliance.

 

So, Is GDPR Compliance a Serious Concern?

Yes

There is no transition period or phases. Once this goes live, you’re either in compliance or you’re not.

Technically, the regulations have been in the pipeline for some time now. They took more than 4 years to create.

But as the deadline looms closer, businesses are showing increased interest.

And for good reason…

Top tier offences carry a maximum fine of the greater of €20 million or 4% of the previous year’s global turnover…

Offenses involving sensitive personal data carry the stiffest penalties.

However, current coverage from experts at Digiday indicates that unless there is a serious violation or blatant disregard for the new regulations, most auditors will provide businesses time to adapt their existing sites and make allowances for businesses that show effort in meeting requirements before doling out major penalties.

So while it might not be the immediate “marketing armageddon” some coverage makes it out to be, we still feel that there is a lot that’s unknown about how the regulations will work once live.

Moreso, if things really are the worst case scenario some think it might be, there are major questions about viability for small businesses with an online presence and smaller eCommerce operations in meeting regulations.

Regardless of how things turn out, unless it is somehow halted, the regulations will impact a huge number of sites from around the world.

 

Alright, So What Do I Need to Do?

So how can you comply and avoid potential fines?

And what do you have to do to bring your sites in line with the regulations?

Regulations focus on four major principles:

1. Control of personal data (Right to Be Forgotten)
2. Greater transparency in personal data collection and usage (Right to Access)
3. Improved consent on personal data collection and usage (Consent)
4. Increased responsibility on personal data security and storage (Privacy by Design)

Each of these principles create unique concerns for various aspects of your site.

While flexible, the ambiguity of many GDPR requirements means there’s no single way to recommend reaching compliance goals.

Instead, most experts are recommending that you start approaching it from an overall compliance standpoint and then address individual elements as needed.

• Audit the personal information you collect and how it’s used
• Determine what information is actually needed and don’t collect low value information
• Provide exact information on both what you collect and how you intend to use it
• Make sure consent is explicitly granted
• Give users control of their data
• Develop security protocols and report issues promptly

Auditing your existing information collection practices and consent notifications is the best place to start.

This will give you an overall view of how much work you must do to comply with new regulations.

 

Okay, How Do I Accomplish This on My WordPress Site?

There’s no single WordPress plugin you can install or task you can perform that will instantly make a site GDPR compatible.

While exact answers on how to best approach GDPR compliance will differ based on the features on your site’s pages, plugins you use, and the information you collect, there’s a few universal things you can do to help ensure compliance.

Just remember, we’re not lawyers.

We can’t promise that following this list will make your site 100% compliant.

But we can promise that as of the time of writing, the information provided below is accurate and will work to at least start bringing your site into compliance with these new and complex regulations.

 

#1. Add Consent to the WordPress Core with Plugins

While likely to be addressed before the GDPR deadline, there are certain parts of WordPress that do not natively adhere to requirements.

A major example of this is the comment system.

Submitting a comment requires an IP address at a minimum. Though, in many cases, it can also include an email address and name.

All of this is personal data.

This means you need consent to store the information and must delete comments and user data upon request in a timely manner.

User registration is similar. In most cases, you’ll need at least an email address. From there, options can extend to everything from names to phone numbers and addresses depending on what you require.

All of this must be consented to by the user, stored securely, and monitored.

Should they wish to delete their account, you can either provide an option to do this themselves through a plugin or provide contact information to request deletion.

There’s already a market forming around WordPress plugins and services designed to address these specific concerns.

While most GDPR plugins are still in their early stages, the following options allow you to alter various aspects of WordPress to comply with the new regulations.

Some even work with other third-party plugins, such as Gravity Forms, WooCommerce, and Contact Form 7 for greater flexibility.

• WP GDPR Compliance
• Delete Me
• GDPR Consent by WPUpgrader (Premium paid plugin)
• GDPR
• All-in-One GDPR (Premium paid plugin)
• WP-GDPR (Freemium plugin with paid add-ons)

Just be sure to check WordPress updates after the May 25 deadline.

Some of these features may be rolled out in within WordPress itself by then.

If so, you can likely delete the plugins. But until then, they’re a simple way to boost your compliance.

 

#2. Audit Your WordPress Plugins

Many WordPress plugins set their own cookies, store information in your database, or transmit data to or from third-party servers.

It’s important to ensure that every plugin or service used on your site also complies with GDPR regulations.

Many plugin authors have already written blog posts to explain any potential compliance concerns regarding their plugins and provide a timeline of when (or if) you can expect them to be fully compliant.

If you can’t find any information on the developer’s site, sending an email to their support should yield more answers.

If you’re not sure if — or unable to find confirmation regarding if — a plugin you use is compliant before the deadline, it might be easier to replace a plugin instead of customize the existing plugin to comply.

In many cases, looking up the plugin by name in the WordPress Plugin Repository will yield alternatives.

Checking reviews and the number of active installations can further help you to narrow down your options.

 

#3. Overhaul (or Set Up) Cookie Notifications

Cookie notifications are already a fairly common feature to anyone conducting business in the EU.

But if you simply slapped a bar up that says “we use cookies” and an accept button, that will not cut it under new regulations.

As part of the GDPR’s emphasis on consent, you must state exactly what types of cookies you use and how you use them.

You also need to give visitors more than a default consent option. A link to your privacy policy for more details might help with this.

You also cannot imply consent. This means that using scrolling as a trigger for acceptance or loading cookies before visitors explicitly accept them is a compliance concern.

There are many cookie notification plugins available on the WordPress Plugin Directory. However, few allow for opt-in cookie consent.

Cookie Notice by dFactory appears to allow both opt-in cookie consent and blocking of cookies should users fail to opt in — both key elements of GDPR regulations. Better still, it’s free…

If you don’t mind digging into your site’s code, Cookie Consent by Insites offers similar features in a free and open source Javascript snippet. Just a few cuts and pastes and you should be good to go.

 

#4. Update Your Mailing Lists to Comply with GDPR

Most marketing gurus recommend keeping things as simple as possible regarding lead capture forms.

The less steps a visitor needs to take to complete your form, the better the chance they’ll bother doing so.

To help with this, many forms include pre-checked boxes for consent to contact for mailing lists or other marketing means.

This will no longer work.

GDPR requires explicit, informed consent.

That means that not only will pre-checking the box create a violation, but you must also explain what you plan to do with the information.

Your Marketing Department’s worst nightmare? Maybe.

Plus, you may need to periodically renew the consent on your mailing list should you shift the focus of your campaigns.

Changing mailing list providers, business partners, or who has access to the data you collect might also require updating consent.

Many sites are also recommending ensuring that you’re using the double opt-in method to easily record consent.

However, if you’re in Canada, this was already a requirement of the Canada Anti-Spam Legislation (CASL).

 

#5. Adjust Your Contact Forms to Meet Compliance

If you’re using contact forms to collect information, you’ll also need to explain why you need the information you request.

This means that a trend toward simpler forms is likely.

The less information you collect, the less you need to worry about explaining.

And, as with your mailing list sign ups, don’t forget to be transparent about consent and outline how you’ll use the data if you’re also using the information for marketing purposes.

Whether you’ll be sending out emails, SMS messages, using information in testimonials, or storing it for future use, you need to be specific and — if possible — provide granular consent options so that users can pick what they agree with.

Most popular mailing services, such as MailChimp, allow you to include a preferences button in your emails to allow users to easily opt in and out of your various campaigns and lists.

You’ll also want to make it easy for people to completely unsubscribe from lists and remove their information from your databases.

If they do ask to be removed, you cannot just stop emailing, messaging, or calling them.

You must remove their data completely.

Failing to do so could result in fines.

 

#6. Add Data Control to User Accounts

Adding website features such as community forums or user reviews are popular ways to boost conversions and drive sales.

However, most of these features would require users to submit an email address or name in order to create an account. This is considered personal information under GDPR.

That means you must both notify users of how you plan use the data they provide and get their consent to do so.

Regulations also require that users must be able to delete their information or have it deleted promptly upon request.

So whether your site is using basic WordPress features, such as blog comments, or a more complex plugin such as WooCommerce or BuddyPress, compliance requires that you are familiar with the way the features you use store information and where you can remove a user’s personal information should they make that request.

We expect that many big plugins and the WordPress core will eventually offer this as a baked in feature.

However, until that time, unless you can find a third-party plugin or service that will do it for you, you’re stuck manually digging through your various databases.

For basic data deletion, Delete Me is a third-party plugin designed to delete user accounts within WordPress — and any blog posts or comments attached to them.

 

#7. Update Your Privacy Policies

While already a questionable practice for all but the most basic of sites, the days of boilerplate privacy policies are likely dead with the onset of GDPR.

Much like with cookie notifications, it’s no longer enough to state you collect information for analytics, marketing, or other uses.

You need to break down the exact information you collect, the services you use to process or store said data, and provide a means for users to access or delete the data you have stored that is associated with them.

For some good examples of privacy policies created with GDPR in mind, check out:

• MailChimp’s Legal Policies
• Buffer’s Privacy Policy
• Trello Privacy Policy

While a lawyer experienced with both your business type and online privacy policies in regards to the GDPR is your best option for ensuring a comprehensive, effective set of legal policies, you can also use third-party sites to help you generate something more valid that the typical boilerplate option.

We recommend Iubenda.

With both free and paid options, they can likely handle the concerns of even complex sites and provide a privacy policy that will ensure compliance without all the back and forth of consulting with a legal expert.

 

#8. Talk to A Lawyer or GDPR Expert

With the potential penalties at stake, assuming your efforts to comply with the GDPR are good enough could be a costly mistake.

Especially if you are a bigger business collecting lots of data…

Then there’s the off-site considerations, such as the third-party services processing and storing data for you.

Once you have an idea of how to proceed, we recommend consulting with an expert to ensure that you’ve covered all the requirements and that the changes you put in place — or plan to put in place — will cover any possible liabilities.

 

Any Other Options?

The vague wording of many requirements leave many businesses questioning the liabilities involved.

Because of this, some are considering if it wouldn’t be wiser to simply not service EU visitors instead.

Establishing geoblocking through a CDN like Cloudflare, or using this script (created specifically for the purpose) may be options for this.

On the marketing side, Drip wrote up a guide that walks you through excluding EU residents from their mailing list platform.

However, blocking still doesn’t completely eliminate the risk of contact or transmission of personal data from EU residents.

So, if you’d rather try to comply, this guide offers a solid starting point for achieving compliance.

 

Final Thoughts

Overall, the concepts behind the regulations make sense given the increased number of breaches and questionable information gathering stories in the news.

However, many of the new regulations conflict with the popular trends and best practices currently used by website owners and marketers.

This may pose a serious headache for website operators — particularly if all the interpretations of the new regulations turn out true and the EU is aggressive in enforcing them.

Regardless of what changes are made to the WordPress software to help with compliance, companies and organizations will need to assume responsibility for their own compliance, as these regulations extend far beyond the core of WordPress.

Because of this, we’d still recommend consulting a legal expert familiar with the GDPR before considering your efforts complete and your site compliant.

“Everyone needs to be working in implementations for their own businesses and sites in any case ahead of deadline day, in addition to any changes that need to be made in the WP code,” Burns said. “It’s important to remember that GDPR compliance is not a tick box you can squeeze in next April. This is about your processes, your workflows, and your systems of accountability. Start now.” ~ Heather Burns

 

Helpful Tools

We’ve said it before and we’ll say it again, these new regulations are complex.

How people are interpreting them and frequent updates to both website software and plugins makes for a somewhat fluid situation.

If you’re looking for additional resources on meeting GDPR compliance, you can also consult the official EU GDPR portal for full copies of all regulations, handy summaries, and additional resources. They also list partners available to help businesses meet GDPR requirements.

Don’t feel like sorting through pages of complex legal speak and confusing phrasing?

Check out The Ultimate GDPR Quiz.

With just a few clicks, you can find out what impact these new regulations might have on your site, where to focus your efforts, and some basic actionable tips.

 

---

 

Additional Resources

For additional takes on what these regulations mean, extra resources, and some alternative suggestions, check the resources list below.

• GDPR Made Searchable by Algolia
• GDPR Clarity: 19 Frequently Asked Questions Answered (Gartner)
• GDPR FAQs from EUGDPR.org (EU)
• Guide to the General Data Protection Regulation (GDPR) from the Information Commissioner’s Office (ICO)
• Gearing Up, Getting It Done: Make Your Team a GDPR Success (Kpodnar)
• The GDPR and You, the WooCommerce Store Owner (WooCommerce)
• The Complete WordPress GDPR Guide: What Does the New Data Regulation Mean for Your Website, Business and Data? (CodeinWP)
• Is Your Website GDPR Compliant? How to Get Ready for the General Data Protection Regulations (WPMUDev)
• What is the GDPR? (Cookiebot)
• How to Make Your Website GDPR Compliant (Hallam Internet)
• GDPR – the Challenges and Opportunities for Marketers (Hallam Internet)
• Google Privacy Compliance Summary (Google)
• Preparing for the General Data Protection Regulation (GDPR) – PDF (The Information Commissioner’s Office (ICO)
• Yes, The GDPR Will Affect Your U.S.-Based Business (Forbes)
• Does the General Data Protection Regulation (GDPR) Affect Your Website? How You Can Comply & Avoid Fines (DisclaimerTemplate)
• The GDPR – Key Points for Canadian Businesses (McMillan)
• How GDPR Will Change The Way You Develop (Smashing Magazine)
• Don’t let GDPR kill your marketing automation (Mobile Growth Stack)
• Many Canadian organizations unprepared for the EU’s GDPR compliance deadline (Financial Post)
• ‘EU are the world’: 5 expert tips on GDPR compliance (Digiday)
• Checklist: Is Your WordPress Website GDPR Compliant? (WP Upgrader)
• Worried about WordPress and GDPR? Start Here (Pagely)
• How to make a WordPress website compliant to GDPR (PinkSEO)
• GDPR Checklist (Hubspot)
• GPDR Guide (HubSpot)
• GDPR Readiness Quiz (SurveyMonkey)
• GDPR Compliance Tools in WordPress (WordPress.org)
• Everything You Wanted to Ask a GDPR Expert But Were Afraid to Ask (WPMUDEV)
• How to Make Your Website Compliant (ElegantThemes)
• Categories of Personal Information – PDF (IAPP)
• GPDR for Growth Marketers (Reforge)
• GDPR Security Log (TorqueMag)
• GDPR Compliance Guide (Kinsta)
• Terms of Services – GDPR Update (Pinterest)

If your website collects ANY personal information, such as email addresses, login information or credit cards, then you NEED to secure your site.

One of the best ways to do that is to encrypt any information going to and from your server using HTTPS.

But what if your website doesn’t do e-commerce or collect any sensitive information?

Do you still need to move to HTTPS?

The short answer is…

YES! You want every advantage you can get.

The benefits of HTTPS go beyond basic security. You’ll also get:

• Increased conversion rates
• Increased viewer trust
• Faster load times
• Improved search engine rankings

Hard to argue with those benefits?

We agree.

So, if you haven’t done so already, now’s the time to move your site to HTTPS.

In this guide, we’ll cover everything you need to know. We’ll start with the basics of how encryption works. By the time you’re done, you’ll be ready to implement HTTPS on your site.

Let’s get started!

1. What is HTTPS?

HTTPS uses unique keys to encrypt the information going to and from your website.

It’s kind of like a secret decoder ring.

No one can read what’s said without decoding it first.

This means no hackers snooping on or logging your sensitive information.

How does this all work you ask?

1. You request a Secure Socket Layer (SSL) certificate that verifies your identity.
2. The certificate sits on your hosting server.
3. When visitors use a URL starting with “https://” the certificate is verified and encryption established.

Depending on your certificate type, visitors will see a green padlock in their URL bar or a green padlock followed by the organization name assigned to your certificate.

It’s that simple!

Even a year ago, setting all of this up was kind of a pain.

But thanks to one-click installers, improved hosting support and more awareness from the public about Internet security, HTTPS use is taking off!

2. Why Use HTTPS?

Recent data from both Mozilla and Google show that at the end of 2016 more than 50% of the page views collected by their tools used HTTPS.

These numbers continue to increase every month.

Still don’t think you need HTTPS?

Mozilla Firefox and Google Chrome are about to make a significant change that makes HTTPS a must-have for all businesses…

They’re adding notifications that show when a site is not secured.

We’re not talking some little bit of text in the corner of your site. It’s going to be a red warning badge right next to your site’s URL.

What does this mean for you?

Soon, not having HTTPS could be the difference between online success and disappearing from the front of the rankings.

It’s no longer a fancy feature for the tech-savvy, it’s the cornerstone of a professional web presence.

Security-Savvy Shoppers in the Digital Era

Stop and think for a second how often you send bank account information, personal messages, images of your life or other personal information across the internet.

How often do you log-in to social media or email?

Without encryption, these are all opportunities for anyone with the right knowledge to grab your information as it zips off to its destination.

Data breaches are increasingly common.

While these are no fun for anyone whose personal information is stolen, they’re making people more aware of the importance of data security.

This impacts where they choose to conduct business online.

SSL.com highlights how implementing SSL and displaying a secured seal on your site can boost conversion rates by up to 87%. More than 60% of respondents in a 2011 Actual Insights study said they abandoned a cart over lack of security.

HTTPS: Benefits Beyond Security

Enabling HTTPS also allows you to use the new HTTP/2 protocol.

What’s that mean?

While the specifics are very technical, HTTP/2 is a new way for browsers and your web hosting to communicate.

It uses compression, multiple connections and a bunch of other fancy tech improvements to improve speeds and reduce loading times.

Why’s that important? means decreased loading times, better potential for converting visitors and lower bounce rates due to delays.

Consider these statistics from Kissmetrics:

• 47% of consumers expect a web page to load in 2 seconds or less.
• 40% of people abandon a website that takes more than 3 seconds to load.
• A 1 second delay in page response can result in a 7% reduction in conversions.

Decreased load times mean a lot more than less waiting. They mean increased conversion potential and lowered bounce rates too!

Off-Site HTTPS Benefits

Using HTTPS also helps improve things off your site.

Most importantly, Google has labelled HTTPS as a ranking signal.

Reading “HTTPS as a ranking signal”: http://t.co/nEjcGhm8bJ

— Matt Cutts (@mattcutts) August 7, 2014

They’ve made it clear they like HTTPS and want sites to use it.

As they continue to make changes in Chrome to highlight non-secure sites, this impact of HTTPS on site visibility and ranking is likely to increase.

And let’s face it, in the competitive world of search engine rankings, every edge you can find counts.

3. How Do You Set Up HTTPS?

Specifics will depend on the software used by your site, the site’s complexity, your hosting provider and a number of other factors.

For this guide, we’ll be focusing on WordPress.

Step 1: Choose a Certificate Type

All certificates are issued by Certificate Authorities. These authorities essentially use their reputation to provide proof to visitors that you are who you say you are.

Picking the best Certificate Authority is mostly about cost.

However, there’s three other things to consider when choosing a certificate type.

Consideration #1: Encryption Strength

The strength of encryption is usually measured in bits.

The higher the number, the less chance that someone can figure out your secret code or fake having the code themselves.

Bigger is better, but the current standard is 2048-bit for keys and 128- or 256-bit for data

Consideration #2: Certificate Validation Level

Certificates also come in different validation levels.

While an increased validation level won’t necessarily improve security, the higher options make your security more obvious to visitors. However, this comes with increased costs, waiting times and documentation.

Common validation levels include:

1. Domain Validation (DV) – Available for free via Let’s Encrypt, CACert, Comodo, Symantec and some hosting providers. While you can pay for a DV certificate, this doesn’t make much sense with quality free options available. Most DV certificates take only a few minutes to obtain and provide the same level of security as other certificate types.
2. Organization Validation (OV) – Can be purchased through certificate providers and adds your organization information to the certificate. Can take several days to complete the issuing process.
3. Extended Validation (EV) – Purchasable through certificate providers. Typically the most expensive option. It adds your organization to the URL bar and certificate for increased visibility. Can take up to one week to complete the issuing process.

In most cases, a DV certificate is ideal.

All validation levels offer the same level of security.

Sure–The OV and EV certificates will add additional ways for viewers to verify security and show your commitment to keeping the data provided by site visitors safe.

However, they can cost 2 to 3 times what a DV certificate costs and require a lot more documentation to obtain.

While you can deploy a DV certificate with many hosting providers for free, an EV certificate will likely cost around $80 to $100 per year.

Consideration #3: Domain Coverage

You can’t always use a certificate on more that one site.

There are different types certificates for use with multiple domains or subdomains. These go by a few different names, include:

• Wildcard Certificates
• UCC (Unified Communications Certificates)
• SAN (Subject Alternative Name) Certificates

The number of domains you can use with the certificate will depend on the certificate authority you use. In most cases, it starts around 5 sites per certificate.

If you’re investing in an OV or EV certificate, a multi-domain certificate, will offer substantial savings.

However, this isn’t as important if you’re using free DV certificates.

Our Recommendation:

For most readers, we think the free Let’s Encrypt DV certificates offer a great mix of value and easy installation.

Want to know how to get your free certificates?

Keep reading! We’ll get to the steps soon!

Step 2: Acquire and Install Your Certificate

For this guide, we’ll obtain and install a certificate using the Let’s Encrypt service. If you want an OV or EV certificate, you can probably use your hosting provider.

But if you want to shop around for the best price, you’ll can check out these third-party options:

• VeriSign
• Thawte
• GoDaddy
• GeoTrust
• Comodo
• Digicert
• Network Solutions

One benefit with going through a hosting provider or third-party certificate service is that they’ll usually do the setup for you.

Since the steps will differ by provider or certificate authority, so we won’t cover specific steps for those services here. Just keep in mind, they might charge extra for the assistance.

Before you fork over your hard-earned money, check your hosting panel to see if they offer a one-click installer.

In general, obtaining a certificate goes something like this:

• You’ll generate a Certificate Signing Request (CSR) with your hosting provider
• You’ll submit the CSR to a certificate service
• They will verify the information and issue a certificate
• You’ll upload the certificate to your hosting account using FTP or a hosting dashboard

If this sounds too complicated, DON’T WORRY!

With Let’s Encrypt, the majority of this is automated. You’ll click a few buttons and be ready to go!

For supporting providers, you’ll find an option in cPanel or Plesk.

All you need to do is:

• Click the Let’s Encrypt icon in your hosting dashboard

• Choose your domain from the dropdown at the bottom of the screen.
• Enter the email address associated with the domain at your name registrar.

• Click Install

NOTE: If you’ve recently changed domain names or try to install your certificate on a staged testing server, you might run into issues with validation. Just wait a few hours for the changes to update around the Internet and try again.

If you have shell access for your hosting environment, the Electronic Frontier Foundation’s CertBot offers step-by-step instructions for getting your free certificate through Let’s Encrypt.

Just choose the hosting software and OS and follow the steps listed.

Step 3: Verify Your Certificate

The certificate is installed! We’re finished right?!

Not quite…

While Let’s Encrypt takes the hassle out of installing certificates, you’ll still need to be sure you’ve configured your WordPress install to actually use the certificate.

The first step is to be sure the certificate is working.

Simply head to a page on your site and instead of using “http://” use “https://” in the URL bar.

If everything loads okay, we know the certificate is good.

If you see a mixed content warning, don’t worry! We’ll be fixing those shortly.

If you get a full-screen error or encounter major problems with the loading of your site, the Qualys SSL Labs tool is great for finding out the next step to troubleshoot your issues.

Step 4: Implementing HTTPS in WordPress

Before going through these steps, check with your hosting provider to see if they offer any tools to assist you.

Many hosts offer one-click site optimizers that will enable HTTPS as well.

If so, you can just skip this section and cruise on down to Step 5.

If your provider doesn’t have a dedicated plugin or setting, you still have a few options.

To Implement HTTPS Using a WordPress Plugin:

One of the great things about WordPress is the bounty of plugins to add features to your site.

Just install a plugin and BAM! new features on your site.

We recommend “Really Simple SSL“. 

The free version will work for most sites.

If you have further issues, the Pro version is great for tracking down mixed content issues or enabling advanced features and it has a fair price.

To install the plugin:

• Login to your WordPress Dashboard
• Hover over Plugins on the sidebar
• Click “Add New”

• Search for “Really Simple SSL” in the Search Plugins box

• Click “Install Now” in the box for the plugin

• Wait for the installation to finish
• Click “Activate” in the box for the plugin

Now we need to configure the plugin itself:

• Go to Settings > SSL in the WordPress Dashboard

• Click the Settings tab

• Check “Auto replace mixed content”
• Check “Enable 301 .htaccess redirect”
• Check “Enable javascript redirection to SSL”
• Click Save

Let’s see if it’s working!

Clear any caching plugins installed through WordPress (such as W3 Total Cache, WP Rocket, WordFence or WP Super Cache) or your hosting and refresh your page.

Now look in the URL bar.

You see a lovely green padlock?

Score! We’ve got the basics in place!

To implement HTTPS in WordPress without a Plugin:

Without a plugin, things get a bit geekier.

NOTE: This is digging into a major piece of your site. Doing things wrong can break things. If you’re not comfortable with these steps, as your web developer to help!

You’ll need to edit the .htaccess for your WordPress install.

1. Connect to your hosting provider via FTP and open the .htaccess file for editing
2. Paste the following code into the blank space at the bottom of the file

# Force HTTPS
 RewriteEngine On
 RewriteCond %{HTTPS} off
 RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

Step 5: Updating On-Site Links to Work with HTTPS

If you used the plugin method, you won’t have much to worry about.

However, doing these steps can shave a little off your loading times by removing the need for your site to change any links its finds.

For manual HTTPS implementations, this is essential to getting that little green padlock we’re after.

Even with HTTPS running on your site, anything on your site that uses an HTTP link could result in a mixed content warning.

What’s that mean?

Essentially, the browser is just warning browsers that while the site is secure, some parts of the page are not.

It also gets ride of your shiny green padlock.

We don’t want to leave visitors guessing which parts of your site are secure. So let’s fix that!

Tracking down mixed content issues can be time consuming.

You’ll want to load each page and check the URL bar once the page if fully loaded.

If it’s secure you’re good to go!

If there’s a mixed content error, open your browser console.

• In Chrome, the shortcut is Ctrl-Shift-I (Cmd-Shift-I on Mac).
• In Firefox, the shortcut is Ctrl-Shift-J (Cmd-Shift-J on Mac).

Then check the Security Tab.

It will show the exact items on each page causing the mixed content issue.

This can be everything from scripts to images and anything in between.

In short, if you can link to it, it can cause you problems.

NOTE: The best way to avoid this is to use relative linking whenever possible on your site. Instead of linking to “https://www.yourdomain.com/awesome-image.jpg” just link to “/awesome-image.jpg” then you’ll never have to worry about this again!

You’ll also want to be sure to change your WordPress site setting to point to the HTTPS version of the site as well.

• Click Settings > General in the WordPress Dashboard sidebar menu

• Enter the root HTTPS address to your site (the URL that people would type in to land on your homepage) in the “WordPress Address (URL)” and “Site Address (URL)” boxes

• Click Save Changes

With these changes in place, your site is now pointing to HTTPS wherever possible and hopefully serving up a secured version of your website to viewers.

Step 6: Purge Your Caches

With most of the settings finalized, you’ll want to purge any caching plugins, such as W3 Total Cache, WP Rocket, WordFence or WP Super Cache to ensure that all new requests to the site use the latest HTTPS configuration.

If you’re using a CDN such as Cloudflare, you may need to clear your cache there as well.

Step 7: Update Your Analytics and External Services

While visitors won’t see any major differences between your HTTP and HTTPS sites, most popular analytics providers (i.e. Google Analytics, Google Merchant Services and Google Search Console) see them as two different sites.

This means that unless you update your settings with your analytics providers, you won’t get any data once you’ve switched to HTTPS.

In most cases, you can add the HTTPS property to the list and group them to avoid confusion or clutter on the interface.

Updating your Google Analytics is easy!

1. Load your Google Analytics Admin page

1. Click the dropdown in Property column
2. Choose “Create New Property”

1. Put the name you wish to use in the Website Name field
2. Click the dropdown under Website URL and choose HTTPS://
3. Enter the URL to your site in the box
4. Choose your Industry Category
5. Choose your Reporting Time Zone
6. Click “Get Tracking ID”
7. Add the tracking code to your site

Google Search Console is just as simple!

1. Load your Google Search Console Dashboard
2. Click “Add a Property”
3. Enter your URL starting with “https://” into the box
4. Click “Add”
5. Follow the Verification instructions

To make viewing your sites easier, you can add your HTTP and HTTPS sites to a set on your Dashboard.

1. Click “Create a Set”
2. Enter a set name
3. Choose your HTTP URL from the Members in Set dropdown menu
4. Choose your HTTPS URL from the Members in Set dropdown menu
5. Click “Save Changes”

If you use any other tracking tools, a quick search in the support documentation will likely show the steps needed to ensure your HTTPS traffic is tracked properly.

Step 8: Update Your Backlinks

You’ve probably spent a fair bit of time linking back to your site on forums, emails or social.

While existing links will redirect to HTTPS at your site, that adds a tiny delay that you can avoid by updating the links used in your signatures across the web and on your social media accounts.

You’ll also want to be sure to adjust the links used in your advertising campaigns across the internet.

If you work with other businesses to build links or other sites that regularly link back to your site, be sure to notify them of your switch to HTTPS and request that they update their links accordingly.

Step 9: Configuring HTTP Strict Transport Security

WARNING: This step SHOULD NOT be completed until you know your site’s HTTPS features are functioning properly.

Once you know that your HTTPS site is loading properly and you’ve fixed your mixed content issues, you can enable a setting known as HTTP Strict Transport Security (HSTS).

Essentially, even with HTTPS, your site’s traffic is still vulnerable to man-in-the-middle attacks until the redirect to your HTTPS site kicks in.

Then there’s the added delay (we’re talking milliseconds here) of the redirect from HTTP to HTTPS.

If you’re looking to optimize things to their fullest, add the following line to the .htaccess file of your site:

Header set Strict-Transport-Security "max-age=31536000" env=HTTPS

This not only defaults your site to HTTPS, it adds your site to something known as the HSTS Preload List.

This list is updated periodically with major browsers to automatically load included sites via HTTPS, even on the first visit.

No more worries about delays or snooping hackers!

4. How Can I be Sure HTTPS is Running Properly?

At this point, the bulk of the changes are completed!

Congratulations! Your site is now secure!

Time to kick back and relax with a frosty beverage and a big ‘ol steak right?

Not just yet…

How can you be sure everything is actually working?

Here’s a few ways to check that you haven’t missed anything implementing HTTPS for your site.

• Crawl your site manually: If you have a smaller site, manually crawling your site is the most straight-forward way to ensuring that all pages are error free. Simply make a list of your pages, load each one in your browser and check to be sure that you are seeing a green padlock for each one.
• Google Search Console: If you’re using Google Search Console, you should add the HTTPS version of your site to your properties and upload a new site map. This will allow you to ensure that Google can crawl your site properly and index pages accordingly.

• SSL Labs Server Test: This online tool from Qualys checks your HTTPS implementation and issues a letter grade based on best practices. With the steps listed in this guide, you should see that your site earns an A. If not, the tool’s report card will offer actionable steps for improving your score.

• HTTP Security Report: As an alternative to the SSL Labs tool, the HTTP Security Report digs a little deeper to find more ways to optimize your site security. However, it focuses on more advanced features that you might not need to worry about as much. If your site scores a 40 or higher, you’re officially more secure than the average site in their database. While most of the features toward the end of their report card are outside the scope of this guide, they’re a great starting point for creating an enterprise-grade HTTPS/SSL plan and learning more about the future of HTTPS.

5. Anything I Need to Worry About Once It’s Running?

With your certificates verified and installed and your site redirecting traffic to HTTPS, the only thing left to worry about is certificate expirations.

This will depend on the method that you used to verify and install your certificate.

• If you’re using a host-supported Let’s Encrypt system, renewal is often automatic every 90 days.
• For host-supplied SSL certificates, they’ll typically take care of renewal when you pay your annual certificate fee.
• If you installed your certificate manually, or used Certbot through the shell, you will need to complete the process again at each expiration to renew your certificate.

Most hosts will send reminders when certificates are set to expire.

However, it is best to set a reminder as an expired certificate often results in a very intimidating warning page when visitors browse your site.

The Future of HTTPS and SSL

As more people continue to store and transmit more data online, the need for security will grow.

This means, the tools and techniques for offering exceptional site security will change as well.

We’ll keep this guide up to date on the latest best practices, trends and recommendations to ensure you always know how to secure and protect your site’s traffic and data.

Be sure to check back every few months for new developments!

Next Steps

Implementing HTTPS is just one part of your overall site security.

While it adds an effective layer of protection to any data transmitted to or from your website, it does nothing to stop hackers from using other methods.

This makes it essential to continue to use strong passwords, keep your WordPress site and plugins up to date, scan for malware and use a firewall to help repel attacks.

Your site is only secure as its weakest point.

If you’re not sure where to start, consider the WordFence WordPress plugin.

It offers an easy-to-use interface for boosting site security.

There’s also a free option cover basic needs. The paid tiers offer faster updates and protection for a small monthly fee. Given the cost of recovering a hacked site and the PR hit that comes with a data breach, we consider the fee a fair price to pay.

Want More Tips?

Our WordPress Security Course offers simple to follow instructions and tips for locking down your WordPress site and keeping your data secure. Sign up to stay up to date on the latest security trends from the comfort of your inbox!

No spam, no fluff. Just great guides to help you make the most of your WordPress site!

As a business owner, your website is an essential part of marketing, lead generation and driving profits. It wasn’t long ago that simply having a website–any website–was a distinct advantage for any business.

As the impact of a global economy and the Internet continues shape daily life, more people are getting online to spend their money and research purchases than ever before.

However, many of them are no longer doing this at their desk or from their laptops.

Web usage is making a dramatic shift toward mobile devices. If your site doesn’t include a responsive mobile-friendly design, you might be missing out on a massive opportunity. Even worse–you could be losing your existing customers or clients to the competition.

In this guide, we’ll provide you with everything you need to get started tackling a responsive redesign yourself and you’ll find alternative options at the end should you wish to let someone else handle the job for you.

Let’s get started!

In This Guide:

• What is a Responsive Website?
• How Can I Tell if My Site is Responsive?
• Why Do I Need a Responsive Mobile-Friendly Website?
• What Will My Site Gain from A Mobile-Friendly Responsive Design?
• Are There Any Alternatives for Implementing Mobile-Friendly Design?
• How Do I Pick the Best Responsive Design Option for My Needs?
• How Can I Make My Website Design Responsive?
• Responsive Web Design Examples
• Responsive Web Design Best Practices
• FAQs
• Useful Resources
• Responsive Mobile-Friendly Design Services

What is a Responsive Website?

The Nielsen Norman Group defines Responsive Web Design (RWD) as follows:

“A web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.”

But what does this mean?

Here’s a few characteristics typical of RWD:

Responsive sites change layouts using CSS rules to match the screen dimensions

While much of the current focus on responsive design focuses on mobile devices, good responsive design targets screen resolutions not specific devices.

It does so using CSS media queries or breakpoints. As display resolutions meet these rules, layouts, sizing and sometimes entire elements change to ensure a consistent experience across a range of screen sizes.

Although responsive design trends often focus on smaller devices, 4K televisions and other ultra high-resolution displays might trigger another wave of responsive design concerns.

What looks great on a 1080p monitor now will pale in comparison to the potential of a 4K or 8K display.

Shifting to a mobile-friendly design now will help to make accounting for future display trends simple.

Responsive Design is More than Resizing Content

An effective mobile-friendly responsive design doesn’t simply compress everything into one column. It considers the needs of mobile users and their actions.

Often in implementing a mobile-friendly version of a desktop website, you will need to adjust navigation, condense content and rearrange or remove entire sections of content.

The goal of RWD doesn’t stop at making things fit a particular screen–it’s optimizing the entire user experience.

Responsive Design Accounts for Bandwidth Variables

As access to broadband continues to increase, the bandwidth usage of desktop sites increases as well.

While the videos, gradients and high-definitions images on your website might look great and load quick on a computer, they are not great for mobile design.

Not only do many of these elements take more time and bandwidth to load, they lack the impact they might have at larger sizes.

Reducing bandwidth needs through responsive design will ensure that your site loads quickly on any mobile data connection.

Keeping rendering simple and clean will also ensure that your site performs well on the myriad of mobile devices available.

Whether you visitor is using an entry-level prepaid phone or a flagship tablet, effective RWD ensures your site loads fast.

My Site Looks Great! Why Do I Need a Responsive Design?

Just because your site looks great on your laptop or computer, doesn’t mean that it looks good on all devices.

A good responsive site design accounts for a range of screen resolutions and orientations to ensure that your site looks and performs great regardless of how it is viewed.

Mobile browsing is shifting to the main form of web browsing at a shocking rate. Consumers increasingly expect to be able to research information about your business or products on the phones and tablets.

Consider these statistics:

• Data highlighted by comScore indicates that 60% of the average adult’s digital media usage takes place on a mobile device. (Source)
• Adoption rates indicate that this trend will increase. Between 2010 and 2016, smartphone usage rose 394%. Tablets increased a staggering 1721%! (Source)
• As life with mobile data becomes the norm, all age brackets are tapping into the endless stream of information in their pockets. 21% of millennials in a comScore study don’t use desktop at all. Users age 55+ are the fastest growing segment adopting mobile usage. (Source)
• A cohesive cross-device experience is essential! SmartInsights highlights that in the case of retail sites, 57% of site views take place on both a mobile device and desktops. (Source)
• Google continues to prioritize mobile-friendly listings on mobile searches. This makes a mobile-friendly site essential to good search engine rankings. According to Google’s Mobile Path to Purchase report, 59% of consumers research their purchases on a business website before purchasing. 48% of all consumers start researching their purchases through a search engine. (Source)

Mobile-friendly design is no longer optional!

In 2012, Mashable dubbed 2013 “The Year of Responsive Design.”

In a 2013 Forbes article, Josh Steimle highlighted the need for businesses to implement mobile designs.

The next year, RWD made the Forbes list of 3 Major Web Design Trends in 2014.

In 2015, Creative Bloq included it in their 10 Web Design Trends that Will Change Everything in 2015.

Notice a trend?

At the start of the list, responsive design is heralded as groundbreaking and innovative.

By the end, they’re already talking about the future of RWD and how it has molded the modern web experience.

Responsive design is no longer a new technique or buzzword. It’s an industry standard.

Much like maintaining a social media presence, creating a mobile-friendly experience for your market or audience is quickly transitioning from a competitive edge to an essential element.

ComScore reported that in 2015, the percentage of people in the U.S. using only a mobile device for internet access (11.3%) exceeded that of people using only a desktop computer (10.6%.)

Still, the vast majority of U.S. adults (78%) use both their mobile devices and a desktop or laptop to consume digital content.

Failure to offer a mobile-friendly experience has real ramifications.

You will continue to see increased bounce rates, decreased conversions, reduced user confidence in your business or brand, reduced search engine performance and less traffic.

All of this results in decreased revenue.

While investing in a mobile-friendly responsive site isn’t a negligible cost, failing to create a mobile-friendly option might have far greater costs long-term.

Non-responsive Designs and the User Experience

Sometimes, it’s easier to show the problems older designs create than explain them with words. In these examples, we’ll highlight common issues that your site visitors might face if you’re not using a responsive design.

[no-resize-phone.jpg]

In our first example, there’s nothing responsive about the site. Imagine trying to poke those links with your fingers or read the text without zooming. Even once they zoom, they’ll be forced to scroll back and forth to read the text.

This doesn’t cut it anymore. Every action a visitor has to make to view your site is one more chance that they’ll leave. With the number of responsive sites available now, it won’t take visitors long to find a competitor who makes it easier for them to spend their money.

[scales-to-fit-doesnt-format.jpg]

This example improves upon the first. The site scales itself to fit the display. However, none of the content resizes with it. Fonts remain at the desktop sizes, the navigation bar is far too small for touch interaction and the lack of contrast in the design makes things hard to read.

[nav-not-optimized-bad-fonts.jpg]

Our last example features a mobile-friendly responsive design. Unfortunately, it doesn’t polish the design. Bad font choices, a wrap on the navigation bar and weird alignment in the header all detract from the appearance of the site.

With just a bit of extra work, this site could go from looking like a community flyer to wowing customers. It’s proof that going mobile doesn’t fix everything, you still need to take the time to optimize the design for the best experience and impact.

With the examples out of the way, let’s get into what a responsive website can do for your business!

How Can I Tell if My Site is Responsive?

There’s a simple way to check if your website’s design is responsive–load it on a computer and resize the window.

If the layout shifts to fit the size of the window, some level of responsive design is at work.

However, the mobile guidelines laid out by Google and other major web companies are a bit more complex.

If you want to see if your site is currently up to Google’s standards, their Mobile-Friendly Test is simple.

Paste your link in the box provided and hit analyze!

[Google-Mobile-Test-1]

If your site is already responsive, you’ll get a screen that looks like this:

[Google-Mobile-Test-2]

If your site is not using responsive design, you’ll see this instead:

[Google-Mobile-Test-3]

If you’re greeted by the screen above, you have some work ahead of you. However, the time and investment is well worth keeping an essential part of your business up to date.

Keep reading to find out the options available and resources for getting your site to pass Google’s Mobile-Friendly test.

What Will My Site Gain from a Mobile-Friendly Responsive Design?

Creating a mobile-friendly responsive website–or updating an existing design to follow RWD best practices–offers benefits to both your business and those viewing your site.

Key benefits of responsive design include:

1. RWD allows a seamless user experience across any display size. Whether viewers are checking on your latest posts on the morning commute or creating a wish-list from your eCommerce site with their tablet in bed, they’ll find the site familiar and intuitive across all of their devices.
2. RWD allows greater flexibility to adapt the user experience to the type of device they’re using. You can offer a flashy, immersive experience on desktop and a dialled back experience on mobile without the need to duplicate code, copy content or keep track of multiple links to your site.
3. RWD reduces the chance of SEO errors and makes marketing easier. Instead of having links and analytics split between subdomains, everything funnels through your main domain name. This reduces the chance of crawl errors and makes it simple to create links for email marketing, link building or social media marketing campaigns.
4. RWD makes site upkeep simple and lowers maintenance costs. Should you wish to update your site, design trends change or you need to add new products or services to your pages, it only takes one update to a responsive mobile-friendly site push changes to a wide variety of devices.
5. RWD makes social marketing and sharing simple. Data from comScore shows that 79% percent of the time U.S. adults spend on social media is through a mobile app or mobile site. This means if you’re investing in social media marketing, a large portion of those shares are opened on mobile devices. A responsive site allows you to share a single link that will look good on any device and encourage conversions, interactions and further sharing.

The Nielsen Norman Group offers a great summary of the benefits of RWD:

“For the vast majority of tasks, mobile users will get a vastly better user experience from a well-designed mobile site than from the full site. For a small minority of tasks, mobile users will be slightly delayed by the extra click to the full site.”

While some of the methods in their article are dated, their thoughts on the benefits of mobile-friendly responsive sites versus traditional sites remain as true today as they were 4 years ago when the article was first published.

Are There Any Alternatives for Implementing Responsive Design for My Site?

You might be thinking, “So it’s mobile-friendly responsive design or nothing? Surely there’s something in the middle, right?”

The truth is complicated.

Are there options to get a mobile-friendly experience without responsive design? Yes…
Are there options to get a mobile-friendly experience without the need for redesigning your site at all? Yes…

However, none of these options offer the easy maintenance, future-proofing and sheer flexibility of a full mobile-friendly responsive redesign.

In some cases, they’ll also increase maintenance and upkeep costs. This means that you’re spending more than you would on a full redesign over the long-term without the benefits to show for it.

We’ll go over two popular options and their pro’s and con’s to help you decide the best solution for your needs and budget.

Option #1: Create a Dedicated Mobile Site

This method was popular before the rise of RWD and still has unique benefits to offer. Instead of creating a single site that changes layouts and content based on resolution, you create an entire separate site for each view and serve it instead based on user agent or other browser checks.

Pros of a dedicated mobile site include:

• The ability to create a mobile-friendly experience without altering your existing site

Cons of a dedicated mobile site include:

• Separate sites are needed for varying resolutions to have full benefit
• Each additional site adds another layer of maintenance and increases upkeep costs
• Failure to incorporate elements of the desktop design into your mobile site will create a disjointed experience. This weakens branding, marketing and other essential sales elements.
• As display trends change, you’ll need to continue to update your mobile sites to adjust.

As you can see, while creating a dedicated mobile site does allow you to avoid some of the time and cost of updating your main site to a mobile-friendly responsive design, it’s still a ton of work. In the end, you still don’t enjoy every benefit of RWD.

Option #2: Use a CMS Plugin to Create a Mobile-Friendly Experience

CMS makes deploying complex eCommerce systems, create web-based storefronts and deliver dynamic content easy.

This makes CMS-based sites a popular approach for businesses looking to build an online presence.

If your site uses a CMS, there is a good chance there’s a plugin to add a mobile experience to your site with a few clicks of your mouse.

Leading options by CMS include:

• WordPress: WPTouch or JetPack.
• Joomla versions older than v3.0: Responsivizer and JoomlaShine Mobilize
  (NOTE: Joomla 3.0+ natively supports mobile responsive design. Their update documentation can walk you through the upgrade and migration process.)
• Drupal versions older than v8.0: ThemeKey or MobileTheme.
  (NOTE: Drupal 8.0+ natively supports mobile responsive design. Upgrade instructions are available in the Drupal Community Documentation.)

Pros of a plugin-based mobile site include:

• Easy implementation–many only take a few minutes to install.
• Most incorporate a responsive template to allow for handling the various sizes needed without the need for a subdomain or separate site.

Cons of a plugin-based mobile site include:

• Most plugins require costly upgrades to achieve the best results
• Even with upgrades, most plugins do not offer the flexibility of a mobile-first design
• Mobile design templates used by plugins might not integrate with your existing design creating a disjointed experience from desktop to mobile
• You must rely on plugin developers to update and maintain the plugin. If the plugin is abandoned you may need to find another option or stop updating your site to maintain compatibility.

For sites using a CMS, the plugin option has potential.

Particularly for simple sites without in-depth formatting, custom content or an emphasis on media.

However, even with the best plugins, you will never achieve the level of cohesion and performance available from a full responsive redesign or mobile-first design.

Option #3: Progressive Web Apps

Combining the design potential and cross-platform ease of a website with the robust features and offline use of a mobile app, progressive web apps are poised to change the way apps work on mobile phones.

These apps don’t rely on app stores or user installs to function.

Their coded much like a website but used advanced JavaScript, APIs, caching and other techniques to create an app-like experience right in the mobile browser.

For an in-depth look at the concept, check out this AirBerlin feature on how their app works.

While this option holds great potential, it’s still not cost effective or mature enough for most small businesses or businesses without a dedicated team of programmers and designers.

Support for progressive web apps is still inconsistent across platforms as well.

At the time of writing, Apple’s Safari mobile browser doesn’t support many of the features driving these new apps.

Pros of progressive web apps include:

• App access via URL instead of app store or download
• Ability for users to interact with your app offline
• Push notifications allow for easy interaction with visitors

Cons of progressive web apps include:

• Inconsistent support across browsers
• Standards and best practices still stabilizing
• Development cost is significantly higher than responsive website design

How Do I Pick the Best Responsive Design Option?

Now that you know your options, it’s important to consider which is the best fit for your site and business needs.

Each situation is unique, so we can’t cover every variable or business requirement here. However, these guidelines should be a good starting point for narrowing down the best option for your site.

eCommerce Sites and Online Storefronts

If you’re selling a product or service online, you’ll find limited support from most plugins. Those that do support popular eCommerce platforms often require an upgraded license, so be sure to check the fine print and feature lists before deciding.

In most cases, creating and maintaining a dedicated mobile site for an eCommerce site is extremely labor-intensive.

Our recommendation for this type of site is a mobile-friendly responsive design.

Static Sites (Informational Pages, Landing Pages, Portfolios)

If the content on your static site rarely changes, a dedicated mobile design might work well.

However, as display technologies change, the template will need regular updates to offer the greatest return on investment.

CMS plugins offer a simple option but often do not offer the level of customization needed to optimize conversions for landing pages or present complex portfolios in an intuitive way.

Our recommendation for this type of site is a mobile-friendly responsive design or dedicated mobile site.

Dynamic Sites (Complex CMS sites or Sites with Interactive Elements)

In most cases, a mobile-friendly responsive design is your best choice. Plugins will remove most of the customized features or intricate design already in place on your desktop site.

If you’re already serving up a wealth of content on your site, creating a dedicated mobile site might require the same amount of work as a responsive redesign without providing as many benefits.

Our recommendation for this type of site is a mobile-friendly responsive design.

Media-Heavy Sites

Of the scenarios here, this one is the most complex.

Any form of mobile optimization will help to reduce the bandwidth requirements and improve the load times of media-heavy websites.

You also must consider if all of the media works well with smaller mobile displays.

Often the impact of video or HD imagery is lost on a smaller display. Image galleries that look great on a desktop might turn into an endless scroll-a-thon on mobile as well.

A dedicated mobile site works well in situations where you don’t mind eliminating content.

However, if you frequently update content, this does mean you need to maintain two versions of the site.

CMS plugins will also work, though few offer the options to help prune content that doesn’t fit mobile devices. However, you do get the benefit of a single site to maintain.

Our recommendation for this type of sites is a mobile-friendly responsive design with a full site audit to assess the best content for mobile.

If you’re still having trouble deciding the best option for your site, this flowchart will help you narrow down your choices.

[Decision Flow Chart]

How Can I Make My Website Design Responsive?

With the decision made to create a mobile-friendly responsive design, you have two options.

Fortunately, like most coding, the base software and system requirements are low.

You’ll need:

• A text editor or coding software–such as Atom, Sublime Text or Dreamweaver.
• A copy of the current popular web browsers to make sure your design looks good on most computers.

One additional recommendation we’ll make is the Blisk Browser. It will let you view your design on both a desktop browser and simulated mobile device.

While it’s not as powerful as many of the cross-platform testing tools around, it’s good for quick checks of your design to check flow and layout.

Most modern responsive websites use a combination of HTML, CSS and JavaScript.

• HTML provides the structure and content.
• CSS handles the styling and responsive layout switching.
• JavaScript is used for advanced feature detection, animations and other advanced styling.

If you already have an existing site, you have two options:

1. Design a new responsive site from scratch
2. Adapt the existing design to use responsive web design principles

For the purposes of this guide, we’ll keep things focused mostly on the core design principles and less on actual coding examples.

If you’re looking for a step-by-step tutorial, W3Schools has a great write up on how to get started with examples of code that you can try yourself.

Finding the Optimal Resolutions for Your Responsive Design

To implement a responsive design, you’ll need to determine the resolutions that you wish to target. If you have an existing site with Google Analytics, finding a customized list of the most common resolutions visitors use is a great starting point.

Finding Common Visitor Screen Resolutions in Google Analytics

1. Login to Google Analytics
2. Be sure that the appropriate site is selected in the upper-left corner.
3. Click the Reporting tab at the top of the page
4. On the left sidebar, choose Audience and then Overview
5. Scroll down the main report frame
6. Click Screen Resolution in the Mobile section

There you have it! A full list of the common resolutions Google has tracked visiting your site!

Remember, creating a good responsive design isn’t about designing for devices, it’s about providing a cohesive, user-friendly experience across a range of resolutions.

This won’t be your final set of breakpoints, we’ll be refining it in a moment.

If you don’t have access to analytics, a good starting set of breakpoints is:

• 320px
• 480px
• 768px
• 1024px
• 1280px

This will cover the majority of phones and tablets while also providing a larger layout for monitors. We’ll need to further refine the list based on your design and content, but we’ll get to that later.

Meet the Mighty CSS Media Query

CSS media queries are the core element in many responsive web design projects.

Essentially, you use the breakpoints mentioned above and tell the browser, “Hey! If the window this site is in is this big, use these rules. If it’s that big, use those rules. Thanks guy!”

Basic media query syntax looks like this:

@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

You’ll create a rule for each of your breakpoint ranges and apply your styles (font sizes, paddings, margins, etc) to create a clean design at that resolution.

Start with the smallest resolution, load up your page in a browser and then resize the window until things start to look wonky.

We like the Viewport Resizer bookmarklet for testing sizes without resizing the window. It also allows you to easily find the exact resolution to use with your media queries.

Now it’s a matter of repeating the process, tweaking your breakpoints as the design “breaks” until you’re at the largest size.

By starting at the smallest size, you can immediately notice any fluff or extraneous pieces on your site and expand the content range and features as the layout allows.

The Basics of Making a Good Responsive Website

With the basic foundations in place, we want to take a minute to talk about what constitutes a good mobile-friendly responsive design.

1. Good Responsive Design Doesn’t Target Devices

I know–we’ve said this already. But it’s important! To get the most out of your design and to ensure a good fit for all devices now and in the future, your responsive design should address a variety of sizes based on the needs of your content and the usability of your site. Using relative sizes or fluid grids can help to reduce the number of breakpoints while still providing a highly functional design. Devices are constantly changing, if you’re designing for devices, your site will need to change constantly too!

2. Good Responsive Design Accounts for Input Methods

The way the site looks is just one element of responsive design. For sites with interactive elements, it’s important to remember that most smaller displays use touch inputs. This means you need to make links finger-friendly using font sizing, padding or buttons. You’ll also need to find the best navigation option for your site–in most cases, the navigation bar on your desktop site won’t cut it.

3. Good Responsive Design Only Shows the Essential Elements

As we’ve touched on earlier, a good responsive design isn’t as simple as converting your desktop site into a single column layout. Optimizing media for smaller displays, accounting for lower bandwidth, condensing the experience to fit a smaller display and picking the elements of most use and interest to viewers on mobile devices is essential to optimizing performance.

4. Good Responsive Design Matches Features to Display Sizes

This is one area where designing for devices matters. While those flashy animations and effects might render smooth and consistent on a desktop, they can tax mobile devices. Throw in the sheer number of resolutions out there in the mobile market and it’s often best to simplify these elements for smaller layouts. Site visitors get a consistent experience without lag or delays on handheld devices and you can still present a full-throttle experience on larger displays.

5. Good Responsive Design Offers a Consistent Experience

The balancing act of responsive design is tricky. Keep too much of your larger experience and your smaller layouts suffer in responsiveness and ease of use. Trim too much and smaller layouts look completely different from the larger ones. Finding a balance will keep your brand or business and the user experience at the forefront, leading to better engagement, interaction and conversions.

6. Good Responsive Design Doesn’t Simply Shrink Layouts

Lastly, good responsive design isn’t just about shrinking containers. You need to tweak the text size, images and other visual elements as well. Adding contrast to text, boosting heading sizes slightly or massaging the line spacing can all add that little extra something to a good responsive design.

We’ll offer some specific examples in the next section. For further information on these topics, be sure to check out the Useful Resources sections near the end of this guide.

Great Examples of Responsive Design in Action

In this section, we’re going to highlight sites that use mobile-friendly responsive design to its full potential. We’ve provided screenshots for quick reference. However, if you’re still not sure how this all works, taking the time to click through and resize the window might help to clarify things further.

Good: Esquire
[esquire.jpg]
Esquire takes a media-heavy layout and makes it work on any screen size. As the viewport shrinks, columns are consolidated, advertising banners change and the navigation moves to a touch-friendly design.

Good: World Wildlife Fund Earth Hour
[wwf-earth-hour.jpg]
While no longer live to view, these screenshots from 2011 highlight an excellent example of reflowing, resizing and eliminating page elements to provide an exceptional user experience on any screen size.

Good: Stephen Caver
[stephen-caver.jpg]
Though designed as a portfolio site, Stephen Caver’s site shows how you can keep most of the functionality of your desktop site while resizing elements to work well with smaller mobile displays. While the look is different in each slide, the white space is optimized as the screen shrinks to allow easy access to page elements without endless scrolling or tiny buttons.

FAQs

With all the considerations to be made before implementing a mobile-friendly responsive design and the sheer number of variations and approaches to doing so, there’s some important concepts that don’t fit neatly in their own sections of this guide.

In this section, we’ll cover common questions about both responsive design and the alternatives available.

Q. What about an app?

A. When smartphones were a new technology, apps were insanely popular. There was even rumblings that apps might kill the need for websites entirely.

As things have settled out–and responsive web design has matured–it’s actually shifted in the opposite direction. This 2014 piece from Quartz highlights that the majority of US adults with smartphones don’t install new apps. Only 8% of adults polled installed one per month.

While there are still situations in which a mobile application is the best option, most businesses can offer everything a viewer or customer needs through a well-designed responsive website or web-based application.

Consider these points:

• Mobile apps are expensive to develop and must be designed for each mobile operating system for maximum compatibility. A responsive site will work on any modern mobile browser regardless of the device.
• Apps must be approved by the official app stores and installed on a device before someone can use it. Your site is available anywhere with an Internet connection with zero setup and no need for a lengthy approval process.
• You must convince a user to install your app before they’ll see your content or business. Worse still, you have to remind them to use the app to gain any benefit. Websites are easily linked, promoted and kept at the forefront of your audience’s attention.

Q. What about AMP?

A. Google’s new Accelerated Mobile Pages (AMP) are the company’s latest effort to optimize the web for mobile devices.

Implementing AMP support for your site is rather straightforward–particularly in the case of CMS-based sites.

However while an AMP page is mobile-friendly, it isn’t a one-to-one replacement for a mobile-friendly responsive site.

AMP pages are based around a rigid set of design principles and requirements from Google.

This means that much of the unique branding, imagery and tone of your site might suffer in the AMP design. This also means you have far less freedom to create a cohesive experience with your desktop site.

AMP offers undeniable speed benefits versus loading a responsive website.

Code is optimized and AMP sites are cached to tap into the power of Google’s cloud distribution network. However, with that boost in performance comes limited formatting and design options.

In most cases, AMP support should be implemented in conjunction with a mobile-friendly responsive design, not in place of one.

Q. What about Facebook Instant Articles?

A. Much like Google’s AMP project, Facebook Instant Articles work to consolidate design elements and optimize articles for view on a mobile display. All Facebook Instant Articles are hosted and viewed on Facebook exclusively through the mobile app.

Compared to AMP, design options are restricted even further. However, Facebook Instant Pages do allow you to use articles for lead generation and mailing list subscriptions.

Since content is not hosted on your site, this option is designed to work in conjunction with responsive page designs, not in place of them.

Q. What if I’m designing a new site?

A. If you’re not redesigning a site, mobile-friendly responsive design is even easier to implement.

As we mentioned above in the redesign basics, starting with the mobile interface and expanding your design as the screen enlarges is the best approach. This will ensure that the site is kept streamlined and only important information is included at each breakpoint.

Be sure to test your breakpoints throughout the design process to be sure you’re making the most of your design. Elements often change and content shifts. What works best at the start, might not be the best when the design is nearing completion.

Like most design projects, approaching a responsive design with an iterative approach will often yield faster development times and better results.

Q. What’s the difference between adaptive and responsive design?

A. Before we answer this question, we want to note that terms and definitions are murky here–even within professional design communities. While there are differences between the two, where the exact line between the techniques lies is debatable.

In responsive design, the same HTML and content is served to the browser regardless of the device, browser or bandwidth. CSS rules then determine what is displayed and content scales–often through the use of fluid layouts or relative sizing and placement–to fill the viewport.

Adaptive design looks at the device itself, features and browser specifics to achieve a similar result. In many cases, adaptive designs used fixed dimensions and layouts. As the browser window crosses the breakpoints, adaptive sites exhibit a sort of snapping resizing.

Fast Company offers some quick animations to help reduce the confusion.

In many ways, both approaches offer similar features, benefits and appearances. However, how they work tends to lend itself toward different specific situations.

What’s important to consider here is future-proofing.

A well-designed responsive site will do its best to accommodate the gaps between breakpoints and at both ends of the sizing spectrum.

Adaptive designs require better optimization to avoid obvious gaps and won’t always account for extreme ends of the size spectrum.

For further information on the topic, the Interaction Design Foundation has a great guide.

Q. Will responsive sites work on all mobile devices the same?

A. Yes and no.

In late 2015, OpenSignal reported that there are approximately 24,000 different Android devices on the market. This doesn’t account for Apple, Windows Mobile and other devices.

Will a responsive site do its best to resize and fit itself to the viewport of any device? Yes!

But can a single design promise pixel-perfect duplication across 24,000+ devices? No…

Devices with the same resolution, screen size and browser should yield similar results.

Changing any of these variables might introduce tiny changes to the way the site is rendered. However, with a comprehensive set of breakpoints and a well-implemented fluid design, you can count on a great appearance across the majority of devices.

Useful Resources

Covering everything about responsive web design in a single guide is impossible. Though the techniques and technologies behind RWD have matured since their release, there are still changes and improvements made constantly to deliver better results.

If you’re interested in digging deeper into responsive web design and its benefits, these articles and guides are great places to start.

• 9 Responsive Design Mistakes You Don’t Want to Make – Keeping these mistakes in mind will help to avoid common RWD pitfalls
• Building Your Mobile-Friendly Site – A visual guide with a great set of CMS and framework examples to build on what we’ve covered in this guide
• Responsive Design Breakpoints: The Ultimate Overview – Extra information on finding the perfect breakpoints for your design and performing browser testing
• Designing for a Responsive Web – A deeper look at grid systems, fluid layouts and other advanced responsive web design concepts
• Responsive Resources – An insane collection of links to guides, books, online courses and articles on various aspects of RWD.
• Beginner’s Guide to Responsive Web Design – A good primer on the technical aspects of RWD. Additional courses are available on-site for a fee if you’re looking to improve your skills or create your own designs.
• Responsive Web Design Techniques, Tools and Design Strategies – A collection of guides and articles on plugins and scripts to add features and responsive elements to your site, email campaigns and more.
• How To Use CSS3 Media Queries To Create a Mobile Version of Your Website – A closer look at how to create and implement media queries.
• Notes to an Agency Starting Their First Responsive Web Project – While aimed at professional designers, the best practices and pitfalls in these notes are great things to keep in mind.
• Responsive web design: What the Internet looks like in 2016 – A visual look at many of the concepts and techniques covered in this guide.
• How Important Is Responsive Design? – Undecided about whether your business needs a responsive website? This article offers additional statistics and trends not covered in our guide.
• Responsive Layouts – Want to be sure your site’s design meets Google requirements? Here’s Google’s own guide to responsive layouts.
• You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy – A great list of strategies and concepts you can use along with a responsive website to boost site performance and returns.

—————

Give Your Site a Mobile-friendly Facelift in One Week

If everything covered in this guide seems too technical–or you simply don’t have the time to redesign your site on your own–PixelPress offers a comprehensive mobile-friendly responsive redesign package to get you up in running in 7 days or less!

Our experienced design team understands the complexity of converting an existing layout into a mobile-friendly responsive design.

We will manage the entire transition from start to finish, ensuring maximum uptime and optimizing each element of the site for proper display and performance.

For a flat fee, you can sit back and focus on running your business while we take care of the technical needs.

No worries about unexpected additional requirements or surprise charges.

We’ve been creating world-class designs for nearly a decade and followed the rise of responsive design from the beginning.

In one week or less, you’ll enjoy a site with greater flexibility and functionality that is ready for the future of the Internet and better serves both your business and your market.

Contact PixelPress today to get your upgrade started!

Looking to move your WordPress site to a new home — maybe a new or faster host?

Migrating can be a bit of a headache.

These plugins will help make the move easier:

Duplicator

WordPress Move

All-In-One WP Migration

Super Backup & Clone

BackupBuddy

WP Migrate DB

UpDraft Plus

VaultPress

WP Clone

 

Want to improve your business and do so quickly, at a price that’s transparent upfront?

Enter…”Productized Consulting”.

You’ll see exactly what you’re buying… just like at the store.

Here’s a collection of productized services that might help your business.

Design

Kapa99
Unlimited graphic design subscription service. Easily request the graphics that you need without compromising quality and turnaround time. Free 15 days trial, no contracts.

Draft Revise
Design strategy and A/B testing.

Design Pickle
Unlimited graphic design subscription service.

Undullify
Unlimited graphic design from simple tweaks to creating something brand new.

RockingBookCovers
Book cover design.

Feedback

ThisUserIsMyMom
Your website reviewed… by a guy’s mom.

ThisUserIsDrunk
Your website reviewed… by a drunk person.

Support

HelpFlow
Done for you live chat service. Chats directly with your website visitors and answer their questions.

HelpSquad
24/7 live chat sales and support agents for your website.

Accounting

Julie Elster
Bill collection done for you. Get paid on overdue client invoices.

3 Wise Bears
Outsource your bookkeeping. 3 Wise Bears specializes in small businesses. (UK)

Bench
Bench manages your bookkeeping each month. (CA / US)

Zenkeep
Takes care of your books.

Copywriting

Snap
SNAP is your expert on-demand copywriting team.

Philip Morgan
Produce quality content that speaks to your customers.

Podcasting

PodcastMotor
Podcast editing and production.

CashFlowPodcasting
A podcast done for you or production and editing done for you.

SweetFish
Produces podcasts for B2B companies.

FreedomPodcasting
Editing and production services for your podcast.

CastingWords
Transcription.

YouTube / Video

ContentCreatorsLounge
Video production and editing.

Scribie
Transcription.

PR

Publicize
Offers a done-for-you PR solution to entrepreneurs.

Want to translate a PixelPress theme or any other WordPress theme to your language?
Below is a brief, step-by-step overview of how to do just that using Poedit.
Poedit makes it easier for translators to translate a theme’s text into the language of choice.

Step 1

Download and install Poedit on your computer.

Step 2

Download a copy of your theme’s .po file to your computer using your FTP program of choice. This file is usually located inside the “languages” folder. (yoursite.com/wp-content/themes/yourtheme/languages)

Step 3

Open the .po file using the Poedit program.

Step 4

Click on a text row in Poedit and translate each line as required.

Step 5

Once you’ve translated all the text you’d like translated, click on the “save” button to overwrite the previous .po file on your computer and generate a .mo file which is the one that WordPress will use to translate your theme.

Step 6

Upload the newly translated .po and .mo files back to your theme, overwriting the previous versions.

Not clear? Want some further explanation? Stefan Wallin has produced a great video how-to.

Hope that helps!
Bonne chance! Hodně štěstí! Held og lykke! Succes Veel geluk! Edu! Onnea!