Bradford Minerals: Building An SEO Friendly Website From the Ground Up

As a family-owned business themselves, Bradford acquires royalty interest and mineral rights on behalf of individuals, mainly in the Delaware Basin of West Texas and southern New Mexico. Recently, Station8 worked with Bradford to create a digital experience that captures the guts and grit of the Oklahoma-based business.

In November, we launched their new website. This is a look at how we developed it.

Digital Agency Standards and Client Expectations

In each endeavor, we attempt to best align the client’s needs with our digital standards. As a digital marketing firm, that means championing user experience, page-speed, SEO friendly development, responsive design and security. We chose WordPress as our platform to build the Bradford site — and we use WordPress to build most Station8 websites because it is flexible, allows us to stick to our standards and enables big-picture thinking.

Compatibility and Responsiveness Through fullpage.js

Each web design endeavor is a beast. At the beginning, our UX/UI and web development professionals take charge by determining a suitable website structure based on the many facets of the job. We decided Bradford’s design necessitated a vertical scrolling structure throughout the site. To bring this function to fruition, we employed fullpage.js — a terrific tool we like because of its compatibility and responsiveness. Per their github page, here’s what fullpage is all about:

“A simple and easy to use library to create fullscreen scrolling websites (also known as single page websites or onepage sites). It allows the creation of fullscreen scrolling websites, as well as adding some landscape sliders inside the sections of the site.”

fullPage.js is fully functional on all modern browsers, as well as on Internet Explorer 8, 9, Opera 12 and other older browsers. Furthermore, it works with browsers supported by CSS3 and those not, making it almost universally compatible. In addition, it provides touch support for mobile phones, tablets and touch screen computers.

We think fullpage is so outstanding and developer friendly, our team has created other scrolling sites using the same library.

In addition to the scrolling feature, fullpage enables us to achieve some eye-popping transitions. To create these transitions, the fullpage library requires a very basic HTML structure at the start.

<div id="fullpage"><br></br><div class="section">Some section</div><br></br><div class="section">Some section</div><br></br><div class="section">Some section</div><br></br><div class="section">Some section</div><br></br></div><br></br>

The real power kicks in when the HTML structure is initialized via JQuery. This allows us to effortlessly manage settings to customize the look and feel of each fullpage section. An abundance of opportunities exist, from setting a scrolling speed between sections to enabling keyboard scrolling; adding supplementary class names to sections to creating navigation buttons; setting fixed elements that appear on all sections (such as header and footer) to lazy-loading images and creating parallax sections.

And you can get even more meticulous.

With Bradford, we stylized subtle details by creating custom functions with fullpage’s “call backs.” Custom functions allowed us to add different class names to various elements, and to pause or play videos depending on the section in the viewpoint.

User Experience Above All

At the start, I told you WordPress is empowering because it promotes big-picture thinking. Now, let me illustrate how. For Bradford, WordPress was instrumental in creating a positive frontend and backend user experience alike. On the backend, we integrated Advanced Custom Fields (ACFs) into WordPress to facilitate maintenance and updates through an easy-to-use interface. This powerful tool gives editors a ton of options. For each fullpage section, ACFs allow backend users to change content type, update copy, swap out images and videos and even adjust the “Dark/Light” with a toggle feature. It’s flexible, scalable and easily operated. That’s why we like it — and our backend users do, too.

A Myriad of Opportunities with SVGs

At Station8, advertising and branding are part of our core strengths. And for Bradford, our talented team designed a logo we believe honors the company’s connection to people and land. On the website, this logo, along with a menu icon and other icons, are incorporated and formatted as SVGs (Scalable Vector Graphics), an XML-based vector image.

SVGs are powerful digital weapons because of their responsivity, speed and editability. They are supported on all major browsers, and Google even indexes them, which is great for your Search Engine Optimization (SEO) strategy. In addition, SVGs are valuable assets because they pack a small file size, load fast and look great on every screen resolution.

There is a myriad of ways SVGs can be used. Currently, they are used by only 4.9% of all websites. Google, Reddit, Dropbox and ESPN are among these sites. At Station8, we build all of our websites with SVGs. For Bradford, we utilized them as images, since CSS and Javascript manipulation and animation were not required.

At this time, WordPress core doesn’t support SVGs; we worked around this issue by using the SVG Support plugin.This plugin allows the developer to embed an SVG file’s code using the HTML <img /> tag by simply adding the class name“style-svg” to it.

In this article, we won’t delve into details about how to use SVGs. But if you’d like to learn more, you can checkout Ryan Irelan’s great SVG primer and Jake Giltsoff’s informational guide.

What’s Slowing You Down?

It’s no secret why it’s important for your website to load quickly.

On the Bradford homepage, we poured everything we’ve got into creating a stunning visual experience. We accomplished this by including three eye-catching videos. These videos add texture and a powerful aesthetic to the overall design. They also presented challenges with performance and page speed.

At the surface, it may appear easy to delay video loading. You simply add <preload=”none”> to your video tag. But what if you need to autoplay the video when it’s on the screen? Since the preload attribute conflicts with the autoplay attribute, both cannot be used. As a remedy, we utilized jQuery by creating an empty html5 video tag and adding a div to the source code. So it looks like this:

<video id="video2" poster="https://www.bradfordminerals.com/wp-content/uploads/2017/10/truck.png" autoplay="autoplay" loop="loop" muted=""></video><br></br><div id="videosrc2"><br></br><source src="https://www.bradfordminerals.com/wp-content/uploads/2017/10/BradfordVideo.mp4" type="video/mp4"><br></br><source src="https://www.bradfordminerals.com/wp-content/uploads/2017/10/BradfordVideo.webm" type="video/webm"><br></br></div>

Browsers won’t recognize <source> tags unless they’re in the <video> tag; the <video> tag won’t work until it includes a <source> tag. Your browser can’t render anything until it’s connected with a fullpage.js event and jQuery is used to place the <source> tags into the <video> tag….

onLeave: function(index, nextIndex, direction){<br></br>if(nextIndex == 2) {<br></br>var vidsrc = $('#videosrc2').html();<br></br>$('#video2').html(vidsrc);<br></br>}<br></br>});

With our three videos, a whopping 7mb size page was dragging us down. But by successfully delaying the loading of the 2nd and 3rd videos, we counter-measured the bulky size, and voilà!

Of course, there are other factors to consider when it comes to pagespeed. Hosting, for one. That’s where WP Engine comes in to facilitate caching, which is a highly effective way to optimize your WordPress site.

If you wish to tackle pagespeed head-on, you can also use a caching plugin. At Station8, we like WPFastest Cache, a plugin designed to decrease website load times by minimizing and combining CSS, JS files, browser caching and gzip compression. Importantly, WPFastest Cache pairs well with WPEngine’s own caching system unlike other popular caching plugins. With all of our websites, we prioritize pagespeed. And you can put them to the test here.

Indeed, a discussion about pagespeed necessitates a deeper conversation about SEO. It’s been demonstrated that page speed is a factor in Google’s algorithm to rank pages. That makes sense since it improves the user experience. Accordingly, we referenced every trick in the book to decrease loading times.

SEO friendly Website Development

Beyond pagespeed, we faced additional SEO-related hurdles. Responsive development was one of these obstacles. For the Bradford website, our biggest challenge was keeping the fullpage scroll structure on the mobile site. It’s a heck of a lot of content to fit. But through a series of responsive font size adjustments, we successfully combated this problem with responsive web typography. To learn more, check out this great tutorial about the best practices for responsive web typography.

In addition to pagespeed and responsivity, we also ensured a secure connection with an HTTPS — protection for users when they share personal information via website submission forms. This secure connection is also highly valued by Google. A recent study found most of the domains with an HTTPS version outrank those without one.

We strive to build beautiful, whitehat SEO friendly websites. From end to end in this project, it’s clear that many challenges we faced in development — structure, reduced loading time, responsive design — are connected to best SEO practices. And if you look a little closer, all of these relate to user experience: good structure facilitates website discovery; faster loading times mean less waiting to access information visitors want; responsive design allows users to access info on the go. If that tells you one thing, it’s further evidence that SEO is inextricably linked to satisfying user needs. And that aligns perfectly with Station8’s digital standards.