Wayne Lockwood: Key Web Development Concepts for Marketers

When I work with my marketing team, I know we have the same goal: to provide the users of our site with the best experience possible. Though as a developer I won’t typically be tasked with creating content, there are some key metrics and concepts that I keep in mind when developing that will help both the marketing team and me achieve our goals. Here are some fundamental concepts web developers focus on when building web pages, and what they mean for you as a marketer.

First Meaningful Paint and Time to Interactive

First Meaningful Paint and Time to Interactive are particularly useful metrics in determining the performance of your web page. Essentially, the shorter these times, the faster your users can access and engage with the content on your page. Though your web team does a lot of work to ensure these that the First Meaningful Paint and the Time to Interactive occur as quickly as possible—by using CDNs, modularizing code so only what is needed loads, minifying CSS and JavaScript—there are considerations the marketer can make when working with designers or designing their content that effects these metrics.

Let’s go a bit more in-depth.

The First Meaningful Paint (FMP) is the first time that your web browser renders content on the page that is useful to the end user. Let’s say you have a website all about different types of ducks and on your homepage, you want to feature a “Duck of the Month” as the homepage hero, or rather, main content above the fold. The FMP is the point at which the user can first see the image of your “Duck of the Month” as well as any headline or text attached to the image.

Time to Interactive (TTI) is closely related to the FMP and will come after the FMP. Using the previous example, let’s say our “Duck of the Month” hero also has the ability to play the quack of the duck when clicked on, and you can swipe from left to right for more images. TTI is the time it takes for these features to become available on the page for the user to use, or when the page or app becomes useful.

So, as a marketer, what can you do to help ensure that the time to reach the FMP and TTI is as short as possible? Lots of things!

Ensure Your Best Content is Always Above the Fold

Though this may seem like a no-brainer, it helps exponentially if any content OR interactivity you want from the site is above the fold. Essentially, developers can leverage techniques like “lazy loading,” to ensure that code/images/features are only loaded once a user does an action that would necessitate the code/images/features, such as scrolling down the page or clicking on a button. To ensure you get your fastest FMP and TTI times, you want to put your most valuable content and features front and center.

Driving Off the Page Isn’t Best Practice

The beautiful thing about Web 2.0 is that we can get assets from other sources at the touch of a button, or er…click of a mouse. But loading too many external assets, or relying on too many styles, fonts, and images that need to be loaded from other places can slow your page down. Try instead to use in-house assets or give the files you need to your devs to cut down on load times.

Use Images Optimized for the Web, and Proper for Your Situation

Essentially, it boils down to this: JPEGs are good for smaller images and times when you don’t need your images to be pixel perfect. For example, they make good thumbnail images, background images (depending), icons, etc. PNGs are good to use when you need absolutely pixel-perfect images and are better for pictures of people, larger images on your site, images with text attached etc. Furthermore, many image modification applications, like Photoshop, usually have an option for optimizing images for the web. Since loading assets can take up the bulk of loading time for your page, you want to make sure you are cutting down file size wherever possible, and that usually means using JPEGs wherever won’t affect your user experience.

Bounce Rates and Exit Rates

Bounce and exit rates are key marketing metrics for your site, as they tell you essentially how users are interacting with your pages, how quickly they leave, and where in your conversion funnel they opt out. Your dev team can use these metrics too as a way to see if there are particular issues with the site.

For instance, high bounce rates could be indicative of long loading times. When we talk about how quickly the page should load, we’re talking about a page loading at a maximum of two seconds, and a goal of under half a second. So, pages that take longer than that to load are likely to see users abandon the site before the page even loads, increasing your bounce rates.

Exit rates might be more indicative of a problem with the functionality of a page, or a page layout, later on in your conversion funnel. For instance, a user gets all the way down to some of your awesome gated content, and when they go to submit the form to get access to that sweet, sweet content, if the form times out, or doesn’t submit, or takes a long time to submit, they will leave frustrated.

Since these metrics are typically used by your marketing team, GA or SEO specialist, you might want to draw attention to these particular metrics to your dev team so they can take a look at how to make those particular pages better. They might see something that looks okay on the surface but could subtly affect user experience. Or they might notice that this particular functionality looks fine and shiny on Google Chrome but is a nightmare on Safari! Either way, don’t be afraid to bring these metrics up and have your team investigate.

Responsiveness:

Your front end developers know that responsive design is a must. As a marketer, this is probably also one of your biggest concerns. We want to be able to reach out and engage with our users anywhere, anytime, and on any device. The implementation of responsive design is often placed on the shoulders of the front end developer, but they can’t do it alone. Often times, what looks good on a desktop or what functions well on a laptop, aren’t going to be what looks and works well on someone’s phone or tablet.

Ensure Your Designs Are “Mobile First”

This is more of an instruction for whoever is designing the layouts for your web page, but you can consider this too when making content. Essentially, any designs for mobile device sizes need to be in place before the designs for tablet and desktop can be considered.

The reasons for this are fairly simple:

There is less space on a smaller screen.
A touchscreen has different functionality from a mouse
Frequently, phones may not be connected to Wi-Fi, so your FMP and TTI times become even more important.

Make sure you have all your mobile designs and needs to be considered first, and then work from there. By considering the mobile use case first, we free ourselves up to add to the desktop experience instead of limiting that same experience for mobile devices. It allows us to create more and constrain less when making the website.

Scaling Content

Some of your content is bound to not scale to mobile well. Look at this image of the cast of LOST:

LOST 1

Even here, it is a bit too small. Primarily, you can tell it’s the cast of LOST because the image is large enough that some of the faces and people are recognizable. This is great for your desktop or laptop, where the average viewport size is around 1000 to 1400 pixels wide.

Let’s shrink this bad boy down to mobile size though, shall we?

Lost 2

Oh boy. Look at it now. Can’t really tell what it is at all, except a bunch of people standing around under a moon. Could be for anything, Twilight, Vampire Diaries, Harry Potter (that one guy looks like Hagrid doesn’t he?) Phone widths range between 320-pixel viewports for smaller devices and 400 – 475 for the larger devices. That’s not a lot of width when you consider some of the assets we use in our content.

Now, I know you might say “well, there is explanatory text for the image.” This doesn’t help all too much since images should help clarify the purpose of your site and, in doing so, be self-evident. When you need one element, text, image, video, sound bite, whatever, to explain—not enhance—another element on your site, that is no good. So, when thinking responsively, consider how you might have to change your assets and content to ensure the best experience over multiple device sizes, even going so far as to have different assets for mobile and desktop experiences if absolutely necessary.

To Conclude

As a marketer, you know how to best engage with your customers and your development team knows how to best create a platform for that content to reach them. By ensuring you are using the correct types of assets, and thinking responsively, you can help enable your web team to cut down on loading times and get your users engaged more quickly. You also can help them to find places to improve your site by sharing the metrics that matter to you. When you and your dev team work together to make either large scale or incremental changes to your website, you ensure that users visiting your site have the best and most engaging experience possible.

Are there any tactics you’ll be taking back to your marketing team to help you work with web dev in a more cohesive way? I’d love to keep the discussion going in the comments!

The post Key Web Development Concepts for Marketers appeared first on Marketo Marketing Blog - Best Practices and Thought Leadership.