What Is GDPR? Everything You Need to Know About the Future of GDPR and Marketing

You probably know by now that the European Union’s General Data Protection Regulation (“GDPR”) has gone into effect. But how does that affect your marketing efforts, and how will the new regulation  impact your organic marketing strategy?

What is GDPR?

The General Data Protection Regulation is a new regulation in the EU that is designed to protect the privacy of EU citizens and individuals residing there and give them more control over their personal data.

What does GDPR mean for me?

Now that GDPR is in effect, marketers will be responsible for changing their habits on how much data they need to get their jobs done. The regulations will force people to rethink and tighten up how they collect, use, and retain data, regardless of where that individual resides, because they pretty much have to.  Marketers aren’t going to be able collect data from everywhere and anywhere, or do whatever they want with it; there will simply be too much potential liability.

What are the pros and cons of GDPR and increased focus on data privacy?

Like everything, there is good and bad in the GDPR.  

The pros: Companies are going to have to collect and use data more responsibly, which is the way it should be, because of the new emphasis on individual privacy and control.  Anyone who is mad about that is in the wrong business.

The cons: The GDPR affords EU regulators the discretion to fine companies up to 4% of their worldwide revenue if they are found in violation of the law. The extremely vague sanction process is already being exploited, in my opinion, by activists and other special interest groups against large conglomerates.  Google and Facebook (including Instagram and WhatsApp) have already been hit with lawsuits under the GDPR, collectively seeking € 7.6 billion in damages.

There are also reports of activists going after Apple, Amazon, and LinkedIn.  The process is actually a little unfair to larger companies whose process for changing large policies is often necessarily a little more glacial than smaller businesses.  Regardless, this is likely to lead to more questionable lawsuits and more time and money wasted on high priced lawyers.

What are the effects of GDPR in the next 6 months, 12 months, and 3 years?

6 months: We are going to see more and more headlines being dominated by stories of large companies getting hit with lawsuits and sanctions due to this change in the law. There will also be a lot of discussion from companies on how the GDPR should be managed to avoid the uncertainty of these lawsuits and fines.   

12 months: Using Google and Facebook (and whoever else gets sued) as examples, we may start to see more concrete guidance around how to navigate GDPR and handle personal data.

3 years: I wouldn’t be surprised if more governments adopt GDPR-like regulations (California just did), which ultimately may have some benefits.  I also believe that if you asked 1 out of every 1,000 people, 999 of them wouldn’t care or know about any of this, which is a shame.

Why is GDPR necessary for marketers?

The GDPR is a necessary balance for marketers who are in constant need of new data sources and visuals to satiate their current need.  These folks perpetuate this issue because of their desire to have more and more data, instead of using a few trusted sources they believe in.

I see this issue getting worse year to year, with more people asking for more data to create more reports and trying to pull it all together in some free BI tool to measure every angle of every campaign that has ever run on their site since its inception.  This causes analysis paralysis and ultimately doesn’t help our profession move towards more trusted and accurate measurement: no one can make any decisions if we are always chasing the next new visualization.

Marketers need to change their habits on how much data they need to get their jobs done. The GDPR will force marketers to rethink these practices and really tighten up how they collect, use and retain data. When people allow themselves to make quicker, more accurate decisions based on recent data vs. data from 5 years ago, that’s when I think we’ll start to legitimately move towards a better solution for accurately conducting and tracking campaigns.

What does GDPR mean for organic search?

GDPR means that, as a channel, organic search is more important than ever. The insights we can get from organic search as a channel are already valuable, and collecting and utilizing that data (which is compliant with GDPR regulations) will be more important than ever, because it comes from a trusted source and is directly speaking to the major questions marketers face: what do my customers need? What challenges are they facing? And how can we help?

Get smart about your data usage: learn why your insights coming from trusted data sources are more valuable than endless access to individual data.

The post What Is GDPR? Everything You Need to Know About the Future of GDPR and Marketing appeared first on Conductor Spotlight.

Conductor Spotlight

Daily Search Forum Recap: August 2, 2018

Here is a recap of what happened in the search forums today...

Search Engine Roundtable

Getting an HTTPS migration done in an enterprise environment

There have been some excellent articles written about the steps necessary for a successful HTTP to HTTPS migration. Although we know that a move is becoming more and more pressing, knowing what to do is only a small part of the story when you’re working in an enterprise environment. Somehow, we need to figure out at the very least:

• Who do we need to persuade, and what’s going to convince them?
• How are we going to mitigate risk as much as possible?
• How are we going to get the actual details done? - some of these steps are simple but hard

Many of you will be living this, and be feeling these challenges keenly. We’ve been putting a lot of thought and a lot of work into helping our points of contact make these cases and get these migrations done. Here are some pointers and tips we’ve learned along the way; hopefully they’ll help you.

Sidenote: read about how we used our ODN platform to help to ship an urgent HTTPS migration for a major retailer

If you want to get some sense of the challenges, or if you don’t regularly work with large sites in complex organisations, the journey of the BBC to secure their news section might give you some idea of the complexity:

1. Two years ago, they talk about making changes at their CDNs to enable HTTPS in the future when the individual products (e.g. homepage or travel news) get to the point of being ready on the back-end
2. By the end of 2017, they are talking about enabling HTTPS to their origins and worrying about how to warm up the HTTPS caches
3. June 2018 we get the Medium post about the elusive padlock on BBC News after problems like an Indian government-mandated network block that rendered the site totally inaccessible

And then even after all that effort, we realise that the first links I shared there are on the “BBC blogs” section of the site which is still insecure:

Making the case for the enterprise HTTPS migration

In some cases, I find that business cases and return on investment are the most powerful drivers of change, and there are possible approaches that could use data to make this case (looking first at drops in conversion rate from warnings over unsecured pages) but my first approach would be an argument that looks more like this:

1. We’re definitely going to have to do this eventually
2. External changes mean that we shouldn’t keep putting it off - there are reputational, business, and operational risks from delaying

It’s a more risk-averse argument focusing on avoidance of downside, but it has powerful emotional elements to it:

1. We’re definitely going to have to do this eventually

There are plenty of rational arguments for the move to HTTPS (great article) but this is mainly an argument that no matter what decisions we make, we can’t put this off forever. We can look at competitors, large sites, and external moves (e.g. by Chrome) to make this point powerfully:

Websites are moving to HTTPS at unprecedented rates

Google research shows that:

• More than half of large sites now have HTTPS available (moving from 39% to 54% in the year to Feb 2017) with default HTTPS doubling in a single year
• The bigger / more popular a site is, the greater its chance of having HTTPS available and the greater the chance of it using HTTPS by default
• A majority of desktop browsing now occurs over HTTPS

All of which means that users are becoming more accustomed to seeing HTTPS everywhere and increasingly expect it. We have even seen this in qualitative feedback from website user testing (create a free account to watch this video):

High ranking websites are particularly likely to be HTTPS

In just 9 months, after announcing HTTPS as a (minor) ranking factor, the % of HTTPS results on page 1 of Google search results jumped from 30% to over 50%:

New features increasingly assume HTTPS connections

Features like HTTP/2 (which can bring significant speed improvements to many sites), and service workers (which are required for app-like capabilities such as offline functionality) require or assume the presence of HTTPS connections. If you aren’t already up to speed on them, this presentation by our VP Product, Tom Anthony will tell you what you need to know (create a free account to watch this video).

2. External changes mean we should do it now

Browser changes increase the urgency of making the change

We have known for some time that Google in particular was going to use their Chrome browser to push webmasters to HTTPS. Initially, the just flagged sites as insecure if they were on HTTP when a form was detected:

They then announced further changes to take it from just those pages to any HTTP page:

This actually isn’t Google’s last planned update on this theme, there will be a release of Chrome sometime soon that highlights the insecurity in red:

Not only is this change raising the profile of your security setup with your users and customers and most likely hurting engagement and conversion rate, but it is starting to bring bad press down on those who haven’t made the move yet. This BBC article, for example calls out a number of sites by name and cautions that while you shouldn’t necessarily entirely avoid sites that are still on HTTP, “you should be wary on those that require you to sign in or which let you buy goods and services through them”.

Mitigating the risk of an HTTPS migration

OK, so we know it’s something we want to do, and key stakeholders are coming around to the idea, but pretty early in the process, someone is going to bring up risk factors, and how we can minimise and mitigate as many of the risks as possible.

Aside from thorough testing in a staging environment, what else can you do to reduce the risks of going to HTTPS? One key tool in the arsenal is Content Security Policy (CSP) headers. One of the hardest parts of the move is avoiding mixed-content warnings, where your (secure) page references HTTP resources and assets. A good way of mitigating risks and avoiding UI issues and broken functionality from blocked assets is to roll out HTTPS initially with a very lax CSP that allows insecure assets, but reports them via the report-uri policy directive. This means, that on any HTTPS page that uses HTTP resources, the browser will still report the page as insecure but it will work and you will get collect data on which resources are still in use where.

As you then remove all HTTP dependencies, you can tighten up the CSP to much stricter policies and achieve the “secure” label in the browser. Once all pages are fully on HTTPS and redirects are in place, you can add HSTS (Strict-Transport-Security) to the mix. HSTS is a header served on the HTTPS version of your site that is cached by browsers and informs them not to trust the HTTP version in future and always to request the HTTPS version of every page on your site (until the expiry of the HSTS setting).

(Note: the more important security is to your site, the further down this rabbit-hole you may wish to go - right up to preloaded HSTS sites - though note that this is not easily reversible even temporarily in the event of certificate errors.)

There are a variety of great resources on the SEO details, with checklists and processes to follow, so I’m not going to repeat all of the steps here. I recommend:

• This article on all the benefits of HTTPS and technical features you can use once you have moved over
• Patrick Stox outlined the process, and Aleyda published a great checklist on the SEO steps and implications
• You may find it useful to refer to the official Google line (from John Mueller) to reassure stakeholders about Google’s view of the process and its benefits
  • THOUGH I am very concerned about the advice to “use 302 redirects + rel=canonical to HTTP if you want to test HTTPS but not have it indexed”. I would not recommend ever having canonical links that point to pages that redirect back to the original page (even 302 redirects). I would recommend not doing this.

How are we going to get the details implemented?

As always, knowing what to do and getting agreement to go ahead is only a small part of the battle in many organisations. Large websites and big companies typically have myriad dependencies and integrations of older systems that throw up unexpected roadblocks in the way of the objective. In the case of an HTTPS migration, this is often things like:

• We have mixed-content warnings that we can’t deal with at scale - how are we going to update all the references to images on http URLs? What about our 3rd-party plugins and embeds?
• Our canonical links all point to the HTTP version of our site and the engineering work to update them across all the different page templates is going to add scary amounts of money to the cost of this project - potentially across multiple back-ends / CMS
• We want to add Referrer-policy and especially Content Security Policy headers to enable better testing and mitigate risks, but we have no way to control HTTP headers through our CMS

Recommendations of what to do are worthless if you can’t get them done - a mantra that we repeat a lot at Distilled is it’s not our job to deliver reports - it’s our job to effect change. One of the ways we’ve done this is by building the ODN platform which makes it easy to make agile changes to HTML and HTTP responses. We just completed an urgent HTTPS migration for a major retailer where we addressed exactly these kind of blockers with the platform - you can read more about that here.

If you’re in the unfortunate situation of knowing you need to make the move to HTTPS, and having the organisation aligned, but being blocked by these kinds of technical issue, drop us a line to discuss whether we can help.

CONTACT US TO LEARN MORE ABOUT THE ODN

Distilled

How we did an emergency HTTPS migration using the ODN to avoid Chrome security warnings [case study]

Getting changes made in enterprise environments is hard, even when there are clear financial impacts of not making the changes. Anyone who hasn’t migrated to HTTPS by this point, is aware of the need; it hasn’t happened yet because of insurmountable blockers like mixed-content warnings in hard-to-update back-end systems.

If this sounds like you, read on because the architecture of the ODN, deploying as a CDN, or between your CDN and origin, means that it’s agnostic to whatever server-side technologies you are using, and whatever CMS you have in place, so no matter what limitations your tech stack is imposing, the ODN can help get past these kinds of blockers and allow you to migrate quickly to HTTPS if you haven’t already done so. Get in touch if you want to learn more or see a demo of the ODN.

CONTACT US TO LEARN MORE ABOUT THE ODN

With the rollout of Chrome 68 highlighting all HTTP sites as not secure, there has been widespread press about some sites getting “flagged” (here is the BBC highlighting the Daily Mail in their headline and calling out half a dozen retailers by name).

Sometimes companies behave just like the people that make them up. Most of us can remember a time when we’ve left that big piece of work until really close to the deadline, or even ended up starting work once it’s arguably a tiny bit too late. And businesses do the same - whether it’s shipping the GDPR-related privacy policy update on May 24th (yeah, ok, we did that), or fixing mobile-friendliness issues in a frantic mobilegeddon-related rush, what’s important is too often left until it becomes urgent.

In the case of HTTPS migrations, though, there are a range of reasons why it can actually be really hard to get them done in an enterprise environment. It’s common to have an organisational desire to get this done, but to have specific technical blockers. So, with the growing urgency coming from the external changes, we’ve been looking for ways to live up to our core values and effect change and get things done. In alignment with this, we recently got an urgent HTTPS migration done for a major retailer by using our ODN platform to mitigate a range of technical and on-page blockers. Here’s how:

On-page changes

One of the most common blockers to an HTTPS migration in enterprise environments is fixing mixed-content warnings where your newly-HTTPS pages rely on assets or scripts that are still loaded over HTTP. Even once you have your images (for example) also moved over to a secure hosting environment, you still need to update all the references to those images to use their HTTPS URLs.

We have used the ODN to:

• Update image links from HTTP to HTTPS
• Modify the embed codes and script references for 3rd party plugins
• Update inline CSS references to HTTP assets

By being able to do this site-wide, across all pages sharing a particular template, or on specific pages, we get the right blend of power and efficiency that enables a large volume of mixed-content warnings to be resolved in a short period of time.

Fixing meta information

There’s a variety of meta information that might need to be updated during the migration to HTTPS, but probably the most important is the canonical and hreflang information. The ODN can inject this information into pages where it’s missing (including into the headers for PDFs, for example), and update existing links to the new scheme.

Since canonical and hreflang links are poorly-handled by many CMSs, the power of being able to fix this “outside the system” is powerful and can be set up as a final check to ensure correct canonical links.

Setting up redirects

A critical part of the deployment of a migration to HTTPS is the 1-1 page-level redirects from HTTP pages to HTTPS pages. It’s common for this to be hard to manage, because you may well want to prevent your origin server from even responding to port 80 (HTTP) requests in the new secure world, which means your server can’t handle the redirects needed. We can serve them for you, and make sure that every request hitting your origin is port 443 (HTTPS).

It’s possible to set up redirect rules at the edge with a CDN, but our platform brings two main benefits over that approach:

1. if you are migrating sections of your site at a time, we flexibly update the rules for complex groups of pages
2. we can add logic to avoid chained redirects which is often difficult with blanket rules.

Adding and modifying headers

Content Security Policy (CSP) headers are an important part of many HTTPS setups, and in particular, in risk-averse environments, you may well want to use a changing set of CSP headers to roll out HTTPS cautiously:

• Roll out initially with a very lax CSP that allows insecure assets, but reports them via the report-uri policy directive
  • This means, that on any HTTPS page that uses HTTP resources, the browser will still report the page as insecure but it will work and you will get collect data on which resources are still in use where
• As you then remove all HTTP dependencies, you can tighten up the CSP to much stricter policies and achieve the “secure” label in the browser
  • You may modify this on a section-by-section basis as each section meets the technical requirements
• Once all pages are fully on HTTPS and redirects are in place, you can add HSTS (Strict-Transport-Security) to the mix
  • HSTS is a header served on the HTTPS version of your site that is cached by browsers and informs them not to trust the HTTP version in future and always to request the HTTPS version of every page on your site (until the expiry of the HSTS setting)

It can be difficult in many hosting environments to achieve this level of granularity, control, and agility with changes to headers, and the ODN can help with controlling them at the page, template, or domain level.

Want to see it first-hand?

The architecture of the ODN, deploying as a CDN, or between your CDN and origin, means that it’s agnostic to whatever server-side technologies you are using, and whatever CMS you have in place, so no matter what limitations your tech stack is imposing, the ODN can help fix up these kinds of blockers.

If you are in an environment where you are blocked from getting important things done by a lack of agility for on-page and server configuration changes, we might be able to help. Drop us a line if you would like to see our ODN platform in action.

CONTACT US TO LEARN MORE ABOUT THE ODN

Distilled

Everything You Need to Know About Inserting and Editing Images in WordPress

The post Everything You Need to Know About Inserting and Editing Images in WordPress appeared first on ProBlogger.

Do you feel confident using images in your blog posts?

While there’s no absolute rule that bloggers need to include images, most bloggers will include at least one eye-catching image in each post (normally at or very near the start).

However, it’s easy to make mistakes with images. We’ve already covered how to obtain images legally so you don’t accidentally infringe on someone’s copyright. But in today’s post, I want to go through the process of uploading and inserting images.

Whether you’ve just started blogging or you’ve been blogging for years, I hope you’ll learn something new from today’s post. We’re going to start off with the basics, and move on to some more advanced tips and tricks.

He are the ten things we’re going to cover:

1. How to download an image from the web
2. How to upload an image to your blog
3. How to insert an image into your post
4. How to align your image within your post
5. How to resize your image
6. How to turn your image into a link
7. How to add alt text to your image
8. How to edit your image in WordPress itself
9. How to keep your image file sizes low
10. How to optimise images for retina screens

#1: How to Download an Image from the Web

Brand new bloggers might feel a bit stuck at the first hurdle: downloading their chosen image.

Once you’ve found an image you can legally use, you’ll need to download it to your computer. (While it’s technically possible to insert it in your post using its existing URL on the web, this “hotlinking” is a bad idea. Many sites don’t like it, as it puts extra strain on their servers. And if the image file is removed from its current location, it’ll disappear from your post too.)

To download an image, right-click on it. You should see an option such as “Save image as…”. (It may be worded slightly differently depending on your browser.)

Click on “Save image as…”, and then select the folder on your computer where you want to save it.

On sites that act as a library of images (such as Pixabay and Flickr), you’ll normally be able to choose from different sizes for the image. Here’s how it looks on Pixabay.

The numbers on the left are the dimensions of each image in pixels (width by height). The numbers on the right are the size of each image file in kB/MB. As you can see, larger images equal much larger files.

It’s up to you what size you choose. (We’ll cover this in more detail in sections #9 and #10 on this list.) Note that on Pixabay you need to create a (free) account to download the largest images.

#2: How to Upload an Image to Your Blog

After you’ve selected and downloaded an image, you need to upload it to your blog.

On WordPress, log in to your dashboard, open up your chosen post (or start a new one), and click the “Add Media” button.

Then click the “Upload Files” tab. You can either drag and drop your chosen file to upload it to your blog, or click the “Select Files” button to browse through your computer folders for it.

(Note that whichever you choose, the original file will remain on your computer. Only a copy of it is uploaded.)

If you want to, you can upload several images at once.

#3: How to Insert an Image

First, position your cursor where you want to put the image within your post. (Click at the start or end of a line of text, or click on a blank line.)

Your uploaded images be available in your media library. Click “Add Media” then the “Media Library” tab (if it’s not already selected for you) and you’ll see them.

To insert an image, click on it and you’ll see this panel on the right-hand side of your screen.

You can set the alignment of the image, add a link, and choose the size you want it to be displayed. We’ll be covering all of these later on in this post. (You can edit your image to change any of these details after inserting it.)

Click “Insert into post” to place the image in your post where your cursor is.

#4: How to Align Your Image Within Your Post

If you inserted your image without changing the alignment setting, it may not appear exactly the way you wanted. Perhaps you intended to have it above your text, centred, or at the start of your post. But instead it’s right-aligned alongside the text.

(Dummy text generated by fillerama on “Doctor Who” mode.)

To re-align your image, click on it and then click the “align center” button on the mini-menu that pops up.

(You can also click the little pencil button to edit the image, where you can select the alignment, size and more.)

Your image should now be aligned correctly in your post.

#5: How to Resize Your Image

If your image is too big, you can resize it by clicking on it and then clicking on the edit button in the mini-menu.

You’ll see details about the image. Click the dropdown menu next to “Size” and you’ll see a range of options.

If one of the listed sizes works for you, select it. If not, click “Custom Size” and enter a width or height for your image in pixels. Whichever you choose, the other dimension will be adjusted automatically.

Click the “Update” button at the bottom of the screen, and you’ll be returned to your post with the image updated to your chosen size.

Note that this process doesn’t change the size of your original uploaded image, so the file size will remain the same. (We’ll cover more on this later in this post.)

#6: How to Turn Your Image into a Link

At some point you’ll almost certainly want to create an image that readers can click on to go to a different page.

For instance, you might want to create:

• A “start here” page showing the featured image from several posts, with each image linking to the appropriate post
• A page of book reviews, with the cover image for each book linking to the book on Amazon
• A custom “buy” button for your products, with each one linking to a PayPal or shopping cart page

To add a link to your image, click on the image and then click the little “edit” button that appears to get the Image Details screen.

Click the “Link To” dropdown and select “Custom URL”. You can then enter whatever URL you want the image to link to.

Make sure you click the “Update” button to save your changes to the image.

An even quicker way to add a link to an image is to copy your link, then click on the image and paste the link (press Ctrl+V on a PC or Command+V on a Mac). This will automatically add the link to the image.

#7: How to Add Alt Text to Your Image

Alt (alternative) text is normally used for accessibility. It provides a short description of your image that can be read to people using screen-reading software. (It will also appear on the screen as text if the image fails to load.)

Note that this is different from a caption. If you enter a caption, it w’ll be displayed immediately beneath the image in your post.

You can add alt text to your image when you’re editing it. Simply fill in the Alternative Text field with whatever text you want.

#8: How to Edit Your Image in WordPress Itself

It’s normally best to edit images before you upload them using software such as Photoshop (or, if you want a free alternative, Gimp or Paint.NET).

But sometimes you might want to make adjustments to your original image within WordPress. You can do this by clicking the “Edit Original” button in the Image Details panel.

You’ll then see this screen.

You can then resize the image. (You can only scale down, not up.)

Note: it’s best to do this before making any other edits.

You can also rotate the image, or flip it from top to bottom or left to right, using the buttons immediately above it.

You can crop the image by clicking on it and dragging to select your chosen area. Here’s the original image flipped left to right, with an area selected so it can be cropped.

To crop the image, you then need to click the “crop” button on the top left above the image.

Once you’re happy with your changes to your image, click “Save” beneath it, then “Update” on the next screen. You should now see your new image in the post itself.

If anything goes wrong, you can restore your original image using the “Restore Original Image” option.

#9: How to Keep Your Image File Sizes Low

The larger your image files, the longer they’ll take to load on your web page. And this can potentially affect on your site’s performance. If your site is really slow to load, readers may simply give up and go elsewhere.

There are several ways you can keep file sizes down, including:

• Using .jpg images where possible. They’re compressed, so they aren’t as high quality as other file types. But for images in regular blog posts, they’ll probably look fine. Note that if you have transparent (or partially transparent) images, though, you can’t save them in .jpg format.
• Resizing your image before uploading it to WordPress. If you’ve taken a photo on your camera and it’s 4000px wide, don’t upload it unedited to your blog. Yes, you can scale it down in your post (see #5), but the image will still take a long time to load. Instead, use image editing software to resize the photo before you upload it into your media library.
• Using the WordPress plugin Smush to resize and optimise images you’ve already uploaded in the past. This could make your site significantly faster.
• Using the TinyPNG service and/or Compress JPEG and PNG images plugin to reduce the size of your .png images. (If you have partially transparent images, they’re probably .png files. You should also use .png for any files with graphics in them.)

#10: How to Optimise Images for Retina Screens

The newest Apple products have Retina displays, which have a higher pixel-per-inch density than regular screens.

As SitePoint explains:

Retina has four times more pixels than standard screens. If you have a 400 x 300 image (120,000 pixels), you’d need to use an 800 x 600 alternative (480,000 pixels) to render it well on a high-density display.

This means that if you want a 500px by 330px image for your post, it would be best to upload it as a 1000px by 660px image. That way, it can be displayed crisply on the retina screen.

Your theme might automatically size and display the image correctly for each user (based on their device) if you simply insert it into the post at the larger size. If it doesn’t, you can use the WP Retina 2x plugin (which is explained in detail by Barn2 Media) to create and show the retina images as appropriate.

I know there’s been a lot to take in with this post. Don’t worry: you don’t have to master everything at once.

If you’re new to blogging, you might simply want to get confident with the basics of downloading and uploading images to your blog, then inserting them into your post at the appropriate point.

But if you’ve been blogging for quite a while, you’ve hopefully picked up a new tip or trick today as well. How will you put it into practice this week?

The post Everything You Need to Know About Inserting and Editing Images in WordPress appeared first on ProBlogger.

      

ProBlogger

Google Testing Reading Time Filter in Search Results

Google is testing a new feature in the search results that allows searcher to filter the search results by the approximate time it takes to read the article. The tool is accessed through the Tools filter.   The new filter is a drop down that says “Any duration.”  Then the searcher can choose between 3 time […]

The post Google Testing Reading Time Filter in Search Results appeared first on The SEM Post.

The SEM Post

How to Use F & Z Patterns in Your Landing Page Design

Landing page design is all about communicating your offer to visitors in a clear and direct way. Part of that communication process is making sure that you influence people to notice what you want them to. Using white space to declutter the page and adding a contrasting CTA button are just a few ways to accomplish this.

In the end, though, landing page design is not just about how elements look, but what message they convey to visitors.

Visual appeal is just one facet of landing page design – how page elements interact with each other and flow together determines whether your page will successfully engage visitors.

This is where visual hierarchy comes into play.

What is visual hierarchy?

Visual hierarchy determines which page elements engage the visitor first and which elements they interact with (and in what order) while on the page. By establishing a visual hierarchy, you ensure that communication between the visitor and landing page is seamless.

Visual hierarchy can be achieved using the following techniques:

• Scale: Different sized elements will guide user’s attention — larger elements draw more attention compared to smaller elements.
• Color: People are drawn toward bold, contrasting colors.
• Contrast: Shifts in color can be used to grab attention. Contrasting the color of one element against another draws focus.
• Alignment: Columns and grids can create alignment between elements and make the visitor take notice.
• Proximity: This helps separate and group certain landing page elements together (or apart) to help distinguish between them.
• Page scanning patterns: Eye tracking studies show where visitors focus their gaze once they arrive on a web page and where they proceed throughout the page.

All of the above design elements are important, but this post will focus on the page scanning patterns that eye-tracking studies have shown to be relevant to reading content on the web – in particular, the F and Z patterns.

The F Pattern

In 2006, the Nielsen Norman Group conducted what is considered to be one of the most useful and most cited eye-tracking studies today. During the study, they observed how 232 users viewed thousands of different web pages. The findings showed that users’ main reading behavior was relatively consistent across the various sites and tasks.

More specifically, users read in an F-pattern.

The F-pattern dictates that visitors first read the page in a horizontal direction, mostly along the upper part of the content area, then move down the page and read across a second horizontal line. Finally, visitors scan the left side of the content in a vertical movement.

This is what the movement typically looks like:

The three heat maps pictured above are derived from user eye-tracking studies of three different websites. It is also worth mentioning that the F-pattern does not have to follow a strict two-stem horizontal pattern (see heat map on the right above).

The color key is as followed:

• Red = most viewed and most fixated area
• Yellow = some views, but less fixation
• Blue = least viewed and very few fixations
• Grey = very few views and no fixations

The key thing to remember here is that the user’s eye movement starts in the top left and moves across the page before scanning down the page to search for an element they find engaging. For elements you want visitors to notice on a text-heavy page (like an image), placing them in the F pattern ensures the elements are seen.

Hootsuite uses an F-pattern on their landing page to highlight the most important elements (above the fold):

• First, the visitor’s eye first goes to the headline and subhead.
• Next, they will scan the bullet-point benefits (iconography).
• After that, visitors see both CTA buttons.

BigCommerce also uses the F-pattern on their landing page (above the fold):

• The headline is the largest font on the page so that is likely seen first.
• Then the subhead across to the image.
• Next is the copy in the bullet points.
• Finally, the user scans left to right viewing both CTA buttons.

Arranging your landing page elements so they fall into this particular visual order ensures that visitors go through your page and click the CTA button.

The F-pattern usually works for pages that are content heavy, but can certainly be applied to pages with less content.

The Z Pattern

The Z-pattern layout is typically used on pages that are not content heavy. Its design mimics the route the human eye travels when it reads — left to right, zigzagging top to bottom:

• Visitors first scan from the top-left to the top-right, forming an imaginary horizontal line
• Next, they scan down and to the left, creating an imaginary diagonal line
• Lastly, they look back across to the right again, which forms a second horizontal line

This is the viewing pattern that emerges from these eye movements:

Just like F-patterns, the Z-pattern layout does not have to be an exact Z-pattern. The horizontal lines do not have to be exactly horizontal — they can be angled as well. Furthermore, there can be multiple Z’s throughout the page. Just make sure that:

• The top horizontal line includes the main components you want visitors to focus on first.
• The diagonal line should feature any piece of information that lead to your CTA button.
• The bottom horizontal line should highlight the CTA at any point along this line.

The Lyft landing page features a good example of the Z-pattern:

• The visitor first looks at the logo and “Sign up to ride” CTA button on the top horizontal line.
• Next, they proceed down the diagonal line and scan the form’s headline.
• Lastly, they look at the bottom horizontal line, which has the Lyft vs. Uber headline and subhead leading to the CTA button.

Our last example features LinkedIn using the Z-pattern:

• The first horizontal line includes the “Start hiring” headline and the woman’s face
• Scanning downward-left, visitors then see the copy above the two blue CTA buttons
• In the second diagonal, the eyes moves to the 40% statistic and move left to right across the page to see the other two statistics

In the end, you can use the Z-pattern to get visitors to focus on elements that persuade them to move closer to the conversion goal.

Using the F and Z patterns to create engaging landing page experiences

Placing the most important landing page elements along visitors’ natural eye paths, whether in an F or Z pattern, ensures you create an engaging landing page experience.

Use the power of visual hierarchy on your landing pages to make sure visitors absorb your message and take the actions you want them to take.

About the Author

Tyson Quick is the Founder and CEO of Instapage, the leader in post-click optimization. He founded Instapage in 2012 after seeing how performance and growth marketers were losing money in underperforming advertising campaigns. Since then his vision has been to create a suite of post-click optimization products that maximize returns through advertising personalization.

WordStream RSS Feed