Archive

Archive for September, 2020

How to Use CSS Grid for Sticky Headers and Footers

September 2nd, 2020 No comments

CSS Grid is a collection of properties designed to make layout easier than it’s ever been. Like anything, there’s a bit of a learning curve, but Grid is honestly fun to work with once you get the hang of it. One area where it shines is dealing with headers and footers. With a little adjustment in our thinking, we can pull off headers and footers that behave like they are fixed, or have that “sticky” treatment (not position: sticky, but the kind of footer that hugs the bottom of the screen even if there isn’t enough content to push it there, and is pushed away with more content).

Hopefully this sparks further interest in modern layouts, and if it does, I can’t recommend Rachel Andrew’s book The New CSS Layout strongly enough: it covers both of the major modern layout techniques, grid and flexbox.

What we’re making

Let’s implement a fairly classic HTML layout that consist of a header, main content and footer.

We’ll make a truly fixed footer, one that stays at the bottom of the viewport where the main content scrolls within itself, as needed, then later update the footer to be a more traditional sticky footer that starts at the bottom of the viewport, even if the main content is small, but gets pushed down as needed. Further, to broaden our exposure to grid, let’s design our main content holder so that it can either span the whole width of the viewport, or take up a nicely centered strip down the middle.

A fixed footer is slightly unusual. Footers are commonly designed to start at the bottom of the viewport, and get pushed down by main content as needed. But a persistent footer isn’t unheard of. Charles Schwab does it on their homepage. Either way, it’ll be fun to implement!

But before we move on, feel free to actually peek at the fixed footer implemented on the Charles Schwab site. Unsurprisingly, it uses fixed positioning, which means it has a hard-coded size. In fact, if we crack open DevTools, we see that right off the bat:

body #qq0 {
  border-top: 4px solid #133568;
  background-color: #eee;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px!important;
}

Not only that, but there’s the balance of making sure the main content doesn’t get hidden behind that fixed footer, which it does by setting hard-coded paddings (including 15px on the bottom of the

element), margins (including 20px on

    in the footer), and even line breaks.

    Let’s try to pull this off without any of these restrictions.

    Our baseline styles

    Let’s sketch out a bare minimum UI to get us started, then enhance our grid to match our goals. There’s a CodeSandbox below, plus additional ones for the subsequent steps that get us to the end result.

    First, let’s do some prep work. We’ll make sure we’re using the whole height of the viewport, so when we add our grid, it’ll be easy to put the footer at the bottom (and keep it there). There’s only going to be one element inside the document’s with an ID of #app, which will hold the <header, and

    elements.

    body {
  margin: 0; /* prevents scrollbars */
}


#app {
  height: 100vh;
}

    Next, let’s set up our header, main, and footer sections, as well as the grid they’ll all sit in. To be clear, this will not work the way we want right out of the gate. It’s just to get us started, with a base to build from.

    body {
  margin: 0;
}


#app {
  height: 100vh;
  
  /* grid container settings */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    'header'
    'main'
    'footer';
}


#app > header {
  grid-area: header;
}


#app > main {
  grid-area: main;
  padding: 15px 5px 10px 5px;
}


#app > footer {
  grid-area: footer;
}

    We’ve created a simple one-column layout, with a width of 1fr. If that 1fr is new to you, it essentially means “take the remaining space” which, in this case, is the entire width of the grid container, #app.

    We’ve also defined three rows:

    #app {
  /* etc. */
  grid-template-rows: auto 1fr auto;
  /* etc. */
}

    The first and third rows, which will be our header and footer, respectively, are sized with auto, which means they’ll take up as much space as needed. In other words: no need for hard-coded sizes! This is a super important detail and a perfect example of how we benefit from using CSS Grid.

    The middle row is where we’ll put our content. We’ve assigned it a size of 1fr which, again, just means it takes up all of the remaining space that’s left over from the other two rows. If you’re wondering why we aren’t making it auto as well, it’s because the entire grid spans the viewport’s whole height, so we need one section to grow and fill up any unused space. Note that we do not have, nor will we ever need at any point, any fixed heights, margins, paddings — or even line breaks! — to push things into place. Such is the good life when working with grid!

    Shall we try some content?

    You’ll notice in the Sandbox that I used React to build this demo, but since this isn’t a post about React, I won’t belabor those details; React has absolutely nothing to do with any of the CSS Grid work in this post. I’m only using it as an easy way to navigate between different chunks of markup. If you hate React, that’s fine: hopefully you can ignore it in this post.

    We have Header, Main and Footer components that render the expected

    , and

    elements, respectively. And, of course, this all sits inside our #app container. Yes, in theory, #app should be an

    element, semantically speaking, but that’s always looked weird to me. I just wanted to covey these details so we’re all one the same page as we plow ahead.

    For the actual content, I have Billing and Settings sections that you can navigate between in the header. They both render fake, static content, and are only meant to show our layout in action. The Settings section will be the content that we put in a centered strip on our page, Billing will be the one that spans our whole page.

    Here’s the Sandbox with what we have so far.

    The Billing section looks good, but the Settings section pushes our footer off screen. Not only that, but if we scroll, the entire page scrolls, causing us to lose our header. That may be desirable in some cases, but we want both the header and footer to stay in view, so let’s fix that.

    Fixed header, fixed footer

    When we initially set up our grid, we gave it a height of 100vh, which is the entire height of the viewport. We then assigned the rows for the header and footer an auto height, and the main a height of 1fr to take up the remaining space. Unfortunately, when content exceeds the space available, it expanded beyond the viewport bounds, pushing our footer down and out of view.

    The fix here is trivial: adding overflow: auto will cause our element to scroll, while keeping our

    and

    elements in place.

    #app > main {
  grid-area: main;
  overflow: auto;
  padding: 15px 5px 10px 5px;
}

    Here’s the updated demo that puts this to use.

    Adjustable width main section

    We want our element to either span the whole width of the viewport, or be centered in a 600px space. You might think we could simply make a 600px fixed width, with an auto margins on either side. But since this is a post about grid, let’s use moar grid. (Plus, as we’ll see later, a fixed width won’t work anyway).

    To achieve our centered 600px element, we’ll actually make the element a grid container. That’s right, a grid within a grid! Nesting grids is a totally legit approach, and will even get easier in the future when subgrid is officially supported across browsers. In this scenario, we’ll make a grid with three column tracks of 1fr 600px 1fr or, stated simply, 600px in the middle, with the remaining space equally divided on the sides.

    #app > main {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 600px 1fr;
}

    Now let’s position our the content in the grid. Our different modules all render in a

    child. Let’s say that by default, content will occupy the middle section, unless it has a .full class, in which case it will span the entire grid width. We won’t use named areas here, and instead specify precise grid coordinates of the form [row-start] / [col-start] / [row-end] / [col-end]:

    #app > section {
  grid-area: 1 / 2 / 1 / 3;
}


#app > section.full {
  grid-area: 1 / 1 / 1 / 4
}

    You might be surprised to see a col-end value of 4, given that there’s only three columns. This is because the column and row values are column and row grid lines. It takes four grid lines to draw three grid columns.

    Our

    will always be in the first row, which is the only row. By default it’ll span column lines 2 through 3, which is the middle column, unless the section has a full class on it, in which case it’ll span column lines 1 through 4, which is all three columns.

    Here’s an updated demo with this code. It’ll probably look good, depending on your CodeSandbox layout, but there’s still a problem. If you shrink the display to smaller than 600px, the content is abruptly truncated. We don’t really want a fixed 600px width in the middle. We want a width of up to 600px. It turns out grid has just the tool for us: the minmax() function. We specify a minimum width and a maximum width, and the grid will compute a value that falls in that range. That’s how we prevent the content from blowing out of the grid.

    All we need to do is swap out that 600px value with minmax(0, 600px):

    main {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr minmax(0, 600px) 1fr;
}

    Here’s the demo for the finished code.

    One more approach: The traditional fixed footer

    Earlier, we decided to prevent the footer from being pushed off the screen and did that by setting the element’s overflow property to auto.

    But, as we briefly called out, that might be a desirable effect. In fact, it’s more of a classic “sticky” footer that solves that annoying issue, and places the footer on the bottom edge of the viewport when the content is super short.

    Hey, get back to the bottom!

    How could we keep all of our existing work, but allow the footer to get pushed down, instead of fixing itself to the bottom in persistent view?

    Right now our content is in a grid with this HTML structure:

    <div id="app">
  <header />
  <main>
    <section />
  </main>
  <footer />
</div>

    …where is a grid container nested within the #app grid container, that contains one row and three columns that we use to position our module’s contents, which go in the

    tag.

    Let’s change it to this:

    <div id="app">
  <header />
  <main>
    <section />
    <footer />
  </main>
</div>

    …and incorporate

    into the element’s grid. We’ll start by updating our parent #app grid so that it now consists of two rows instead of three:

    #app {
  /* same as before */


  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: 
    'header'
    'main';
}

    Just two rows, one for the header, and the other for everything else. Now let’s update the grid inside our element:

    #app > main {
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr minmax(0, 600px) 1fr;
}

    We’ve introduced a new auto-sized row. That means we now have a 1fr row for our content, that holds our

    , and an auto row for the footer.

    Now we position our

    inside this grid, instead of directly in #app:

    #app > footer {
  grid-area: 2 / 1 / 2 / 4;
}

    Since is the element that has scrolling, and since this element now has our footer, we’ve achieved the sticky footer we want! This way, if has content that exceeds the viewport, the whole thing will scroll, and that scrolling content will now include our footer, which sits at the very bottom of the screen as we’d expect.

    Here’s an updated demo. Note that the footer will be at the bottom of the screen if possible; otherwise it’ll scroll as needed.

    I made a few other small changes, like minor adjustments to paddings here and there; we can’t have any left or right paddings on , because the

    would no longer go edge-to-edge.

    I also made a last-minute adjustment during final edits to the

    element—the one we enabled adjustable width content on. Specifically, I set its display to flex, its width to 100%, and its immediate descendant to overflow: auto. I did this so the

    element’s content can scroll horizontally, within itself, if it exceeds our grid column boundary, but without allowing any vertical scrolling.

    Without this change, the work we did would amount to the fixed footer approach we covered earlier. Making section> a flex container forces its immediate child — the

    that contains the content — to take up all of the available vertical space. And, of course, setting that child div to overflow: auto enables scrolling. If you’re wondering why I didn’t just set the section’s overflow-x to auto, and overflow-y to visible, well, it turns out that’s not possible.

    Parting thoughts

    We haven’t done anything revolutionary in this post, and certainly nothing that couldn’t be accomplished before CSS Grid. Our fixed width container could have been a block element with a max-width value of 600px, and auto margins on the left and right. Our fixed footer could have been made with position: fixed (just make sure the main content doesn’t overlap with it). And, of course, there are various ways to get a more traditional “sticky footer.”

    But CSS Grid provides a single, uniform layout mechanism to accomplish all of this, and it’s fun to work with — honestly fun. In fact, the idea of moving the footer from fixed to sticky wasn’t even something I planned at first. I threw it in at the last minute because I thought the post was a bit too light without it. It was trivial to accomplish, basically moving grid rows around, not unlike putting lego blocks together. And again, these UIs were trivial. Imagine how brightly grid will shine with more ambitious designs!

    The post How to Use CSS Grid for Sticky Headers and Footers appeared first on CSS-Tricks.

    You can support CSS-Tricks by being an MVP Supporter.

    Categories: Designing, Others Tags:

Diving Into The Stock Market With Marketstack

September 2nd, 2020 No comments

The global stock market is something that I think most of us are familiar with, but very few people know how to capitalize on. After all, it’s not as easy as simply sinking money into a stock and hoping it rises.

With the global stock market, there are trends and data that you have to follow in order to really be efficient. That’s where Marketstack comes into play.

What is Marketstack?

Marketstack is a real-time, intraday and historical market data API. It uses a free and easy-to-use REST API interface that delivers worldwide stock market data in JSON format.

marketstack

By using Marketstack, you can follow trends and get real-time updates on the worldwide stock market. Let’s dive into this a little deeper.

Marketstack features

Marketstack makes it easy for anyone with any skill set to get started. In fact, with 30,000+ happy users, including some big name brands like Uber and Amazon, it’s no wonder Marketstack has the reputation of being so good.

In addition to being so user-friendly, Marketstack comes with a few helpful features. Here’s what you can expect:

Real-time data

With the global market, every minute counts. Obtain real-time stock data for any ticker down to the minute, request intraday quotes or search 30+ years of accurate historical market data.

125,000+ stock tickers

Easily integrate the API and make use of 125,000+ worldwide stock tickers, collected from 72 global exchanges, including Nasdaq, NYSE, and more.

marketstack

Simple, quick, and reliable

Marketstack is a simple yet powerful API that is both scalable and reliable. With an uptime of nearly 100%, it only takes about 5 minutes to get started.

Lightweight JSON API

Mafrketstack’s stock market data API has been built with simplicity in mind: Requests are made using a simple HTTP GET structure and API response data is delivered in lightweight JSON format.

marketstack

Bank-level security

All data sent to and from the Marketstack API is encrypted with industry standard 256-bit HTTPS encryption. Rest assured that anything you share through this API is safe and for your eyes only.

Extensive documentation

A straightforward API documentation will help you get up and running within minutes using interactive demo requests and code examples in a variety of programming languages. If you’d like to explore API documentation, click here.

Marketstack pricing

Marketstack offers many subscription plans that cover a wide variety of needs. Best of all, they offer a free subscription to get started, and it comes with its fair share of options:

  • Up to 1,000 requests per month
  • Connect with 72 stock exchanges around the globe
  • Look back at the stock market history for up to 1 whole year
  • Gather end-of-data stock data every single day

Of course, if the free plan doesn’t suit your needs, there are still lots of good, paid subscriptions out there for you to take advantage of:

marketstack

Conclusions

Marketstack is one of the most comprehensive yet powerful tools on the market. It is by far the most powerful tool for keeping track of the worldwide stock market that anyone can get their hands on.

With Marketstack, you can rest assured that the information gathered is 100% accurate and up-to-date. Stock market data provided by the marketstack API is licensed and sourced from multiple high-authority market data providers around the world. Stock market data from United States exchanges is licensed and sourced from Tiingo, Inc. out of New York City, USA.

The Marketstack API service is built on top of apilayer cloud infrastructure and therefore comes with a significant level of scalability and performance. The API currently handles several million API requests per hour with ease.

All-in-all, if you’re looking for a high-volume stock market API, there’s no better choice you can make than signing up for Marketstack.

Read More at Diving Into The Stock Market With Marketstack

Categories: Designing, Others Tags:

Comparing Browsers for Responsive Design

September 1st, 2020 No comments

There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing CSS and making sure it’s working across all the viewports in a single glance.

They are all very similar. For example, they do “event mirroring” meaning if you scroll in one window or device, then all the others do too, along with clicks, typing, etc. You can also zoom in and out to see many devices at once, just scaled down. Let’s see if we can root out any differences.

Sizzy

  • Windows, Mac, and Linux
  • “Solo” plan starts at $5/month and they have plans up from there

There are loads of little cool developer-focused features like:

  • Kill a port just by typing in the port number.
  • There’s a universal inspect mode but, while you can’t apply a change in DevTools that affects all windows and devices at the same time, you can at least inspect across all of them, and when you click, it activates the correct DevTools session.
  • Throttle or go offline in a click.
  • Turn off JavaScript with a click.
  • Turn on Design Mode with a click (e.g. every element has contenteditable).
  • Toggles for hiding images, turning off all styles, outlining all elements, etc.
  • Override fonts with Google Font choices.

Responsively App

  • Universal inspect mode that selects the correct DevTools context
  • The option to “Disable SSL Validation” is clever, should you run into issues with local HTTPS.
  • One-click dark mode toggle

Blisk

  • Window and Mac
  • Free, with premium upgrades ($10/month). Some of the features like scroll syncing and auto refreshing are listed as premium features, which makes me thing that the free version limits them in some way.
  • Autorefresh is a neat idea. You set up a “watcher” for certain file types in certain folders, and if they change, it refreshes the page. I imagine most dev environments have some kind of style injection or hot module reloading, but having it available anyway is useful for ones that don’t.
  • There is no universal DevTools inspector, but you can open the DevTools individually and they do have a custom universal inspection tool for showing the box model dimensions of elements.
  • There’s a custom error report screen.
  • You can enable “Browsing Mode” to turn off all the fancy device stuff and just use it as a semi-regular browser.

Polypane

  • Windows, Mac, and Linux
  • Free, with premium plans starting at $10/month. Signing up is going to get you a good handful onboarding emails over a week (with the option to you can opt out).
  • It has browser extensions for other browsers to pop your current tab over to Polypane
  • The universal inspect mode seems the most seamless of the bunch to me, but it doesn’t go so far propagate changes across windows and devices. Someone needs to do this! It’s does have a “Live CSS” pane that will inject additional CSS to all the open devices though, which is cool.
  • It can open devices based on breakpoints in your own CSS — and it actually works!

Duo

  • It’s on the Mac App Store for $5, but its website is offline, which makes it seem kinda dead.
  • It has zero fancy features. As the name implies, it simply shows the same site side-by-side in two columns that can be resized.

Re:view

  • It’s not a separate browser app, but a browser extension. I kind of like this as I can stay in a canonical browser that I’m already comfortable with that’s getting regular updates.
  • The “breakpoints” view is a clever idea. I believe it should show your site at the breakpoints in your CSS, but, it seems broken to me. I’m not sure if this is an actively developed project. (My guess is that it is not.)

So?

What, you want me to pick a winner?

While I was turned off a little Polypane’s hoop jumping and onboarding, I think it has the most well-considered feature set. Sizzy is close, but the interface is more cluttered in a way that doesn’t seem necessary. I admit I like how Blisk is really focused on “just look at the mobile view and then we’ll fill the rest of the space with a larger view” because that’s closer to how I actually work. (I rarely need to see a “device wall” of trivially different mobile screens.)

The fact that Responsively is free and open source is very cool, but is that sustainable? I think I feel safer digging into apps that are run as a business. The fact that I just stay in my normal browser with Re:View means I actually have the highest chance of actually using it, but it feels like a dead project at the moment so I probably won’t. So, for now, I guess I’ll have to crown Polypane.

The post Comparing Browsers for Responsive Design appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Real-Time Stock Data Using Marketplace’s API

September 1st, 2020 No comments

In this time of global economic turmoil, it’s more important than it’s ever been that your financial decisions are based on accurate, up-to-date, market information.

In a world where stock price is a key confidence marker, the businesses that attract attention, secure investment, and grow, are the ones that can demonstrate their value in a wider market.

Up to now, displaying accurate market pricing has been prohibitively expensive, needing direct access to a huge dataset, and the code to mine it. So we’re delighted to introduce marketstack, a real-time market data API that’s reliable, simple to integrate with your site or app, is lightning fast, and includes a free-forever plan.

What is marketstack?

marketstack is a REST API that allows you to access stock data for public companies at 72 global exchanges including the New York Stock Exchange, the Nasdaq, the Tokyo Stock Exchange, and the London Stock Exchange.

marketstack delivers real-time market data, accurate to a single minute, ensuring that the information you base your decisions on, and the information you pass on to your customers, is always up to date.

There are more than 125,000 stock tickers, from over 50 different countries; you can query stocks, or over 75 different market indices; intraday market data is included, meaning you can monitor trades that close at the end of the day; you can even retrieve data about time-zones and international currencies.

Why Choose marketstack

marketstack uses cutting-edge technology to deliver market data in an easy-to-integrate JSON format, which is lightweight and incredibly easy to dig into.

Requests are made via a simple HTTP GET call, and all requests are run through bank-quality 256-bit HTTPS encryption. Whatever code stack you’re using, whether it’s PHP, Python, Node, or plain old JavaScript, marketstack provides comprehensive documentation to get your team up to speed in mere minutes.

The highly reliable cloud infrastructure can handle anything from a few dozen requests per year, all the way up to millions of requests per day. Regardless of the scale of your project, marketstack is robust and flexible enough to handle it.

It’s Not Just About Money

marketstack isn’t just about the bulls and bears of markets, in the tech sector specifically, stock price is an indicator of wider business trends and performance.

When Apple became the first US company to reach a $2 trillion valuation, not only was its stock price central to the story, but it indicated a trend in the tech giant’s dominance that went beyond cold hard cash.

When an eccentric billionaire makes outrageous, and ill-judged comments, and tanks his company’s valuation, the fluctuations in stock price are a big part of the story.

Beyond the spin of politicians, the market index of different exchanges is an indication of what analysts with in-depth knowledge really think during an election campaign.

With over 30 years of historical data, marketstack is a history of business, particularly the burgeoning tech sector, and makes that history available with a simple to use API.

marketstack’s Rock Solid API

marketstack’s API is built on top of apilayer technology, one of the most respected, and trusted API providers in the world, with a huge amount of experience delivering data reliably. Millions of API requests can be run through the API hourly, and it still has almost 100% uptime.

Any API is only as good as the data it supplies, and marketstack’s data is supplied by numerous high-authority providers around the globe, resulting in unprecedented accuracy.

As a result, marketstack is trusted by over 30,000 companies — including Microsoft, Amazon, Uber, and Credit Suisse — and 80+ universities.

Getting Started with marketstack

marketstack is entirely free for up to 1000 requests per month, with access to 1 year of historical data, as well as end-of-day data. No credit card is required to get started, and you’ll never be billed. This is the perfect option for simple integrations, or developers working on proof-of-concept builds. What we really like about marketstack is that the free package is genuinely usable. It’s not just a trial version that presses you into upgrading.

For anyone who needs more comprehensive data, packages that include market indices, technical support, and commercial use permissions, start at $9.99 per month, or just $7.99 per month when billed annually.

Head over the marketstack today to claim your free API key, and get started.

[– This is a sponsored post on behalf of marketstack –]

Source

Categories: Designing, Others Tags:

How to Make a Media Query-less Card Component

September 1st, 2020 No comments

Fun fact: it’s possible to create responsive components without any media queries at all. Certainly, if we had container queries, those would be very useful for responsive design at the component level. But we don’t. Still, with or without container queries, we can do things to make our components surprisingly responsive. We’ll use concepts from Intrinsic Web Design, brought to us by Jen Simmons.

Let’s dive together into the use case described below, the solutions regarding the actual state of CSS, and some other tricks I’ll give you.

A responsive “Cooking Recipe” card

I recently tweeted a video and Pen of a responsive card demo I built using a recipe for pizza as an example. (It’s not important to the technology here, but I dropped the recipe at the end because it’s delicious and gluten free.)

Responsive Pizza Recipe Component without Media Queries.https://t.co/upft4Vpkp1

Work in progress based on a design by @WalterStephanie. Have fun resizing your browser window ? pic.twitter.com/FHK2ghMb91

— Geoffrey Crofte ? (@geoffreycrofte) July 18, 2020

The demo here was a first attempt based on a concept from one of Stéphanie Walter‘s talks. Here is a video to show you how the card will behave:

And if you want to play with it right now, here’s the Pen.

Let’s define the responsive layout

A key to planning is knowing the actual content you are working, and the importance of those details. Not that we should be hiding content at any point, but for layout and design reasons, it’s good to know what needs to be communicated first and so forth. We’ll be displaying the same content no matter the size or shape of the layout.

Let’s imagine the content with a mobile-first mindset to help us focus on what’s most important. Then when the screen is larger, like on a desktop, we can use the additional space for things like glorious whitespace and larger typography. Usually, a little prioritization like this is enough to be sure of what content is needed for the cards at any and all viewport sizes.

Let’s take the example of a cooking recipe teaser:

In her talk, Stéphanie had already did the job and prioritized the content for our cards. Here’s what she outlined, in order of importance:

  1. Image: because it’s a recipe, you eat with your eyes!
  2. Title: to be sure what you’re going to cook.
  3. Keywords: to catch key info at the first glance.
  4. Rating info: for social proof.
  5. Short description: for the people who read.
  6. Call to action: what you expect the user to do on this card.

This may seem like a lot, but we can get all of that into a single smart card layout!

Non-scalable typography

One of the constraints with the technique I’m going to show you is that you won’t be able to get scalable typography based on container width. Scalable typography (e.g. “fluid type”) is commonly done with the with viewport width (vw) unit, which is based on the viewport, not the parent element.

So, while we might be tempted to reach for fluid type as a non-media query solution for the content in our cards, we won’t be able to use fluid type based on some percentage of the container width nor element width itself, unfortunately. That won’t stop us from our goal, however!

A quick note on “pixel perfection”

Let’s talk to both sides here…

Designers: Pixel perfect is super ideal, and we can certainly be precise at a component level. But there has to be some trade-off at the layout level. Meaning you will have to provide some variations, but allow the in-betweens to be flexible. Things shift in responsive layouts and precision at every possible screen width is a tough ask. We can still make things look great at every scale though!

Developers: You’ll have to be able to fill the gaps between the layouts that have prescribed designs to allow content to be readable and consistent between those states. As a good practice, I also recommend trying to keep as much of a natural flow as possible.

You can also read the Ahmad’s excellent article on the state of pixel perfection.

A recipe for zero media queries

Remember, what we’re striving for is not just a responsive card, but one that doesn’t rely on any media queries. It’s not that media queries should be avoided; it’s more about CSS being powerful and flexible enough for us to have other options available.

To build our responsive card, I was wondering if flexbox would be enough or if I would need to do it with CSS grid instead. Turns out flexbox in indeed enough for us this time, using the behavior and magic of the flex-wrap and flex-basis properties in CSS.

The gist of flex-wrap is that it allows elements to break onto a new line when the space for content gets too tight. You can see the difference between flex with a no-wrap value and with wrapping in this demo:

CodePen Embed Fallback

The flex-basis value of 200px is more of an instruction than a suggestion for the browser, but if the container doesn’t offer enough space for it, the elements move down onto a new line. The margin between columns even force the initial wrapping.

I used this wrapping logic to create the base of my card. Adam Argyle also used it on the following demo features four form layouts with a mere 10 lines of CSS:

CodePen Embed Fallback

In his example, Adam uses flex-basis and flex-grow (used together in flex shorthand property) )to allow the email input to take three times the space occupied by the name input or the button. When the browser estimates there is not enough rooms to display everything on the same row, the layout breaks itself into multiple lines by itself, without us having to manage the changes in media queries.

I also used clamp() function to add even more flexibility. This function is kind of magical. It allows us to resolve a min() and a max() calculation in a single function. The syntax goes like this:

clamp(MIN, VALUE, MAX)

It’s like resolving a combination of the max() and min() functions:

max(MIN, min(VAL, MAX))

You can use it for all kind of properties that cover: , , , , , , or .

The “No-Media Query Responsive Card” demo

With all of these new-fangled CSS powers, I created a flexible responsive card without any media queries. It might be best to view this demo in a new tab, or with a 0.5x option in the embed below.

CodePen Embed Fallback

Something you want to note right away is that the HTML code for the 2 cards are exactly the same, the only difference is that the first card is within a 65% wide container, and the second one within a 35% wide container. You can also play with the dimension of your window to test its responsiveness.

The important part of the code in that demo is on these selectors:

  • .recipe is the parent flex container.
  • .pizza-box is a flex item that is the container for the card image.
  • .recipe-content is a second flex item and is the container for the card content.

Now that we know how flex-wrap works, and how flex-basis and flex-grow influence the element sizing, we just need to quickly explain the clamp() function because I used it for responsive font sizing in place of where we may have normally reached for fluid type.

I wanted to use calc() and custom properties to calculate font sizes based on the width of the parent container, but I couldn’t find a way, as a 100% value has a different interpretation depending on the context. I kept it for the middle value of my clamp() function, but the end result was over-engineered and didn’t wind up working as I’d hoped or expected.

/* No need, really */
font-size: clamp(1.4em, calc(.5em * 2.1vw), 2.1em);

Here’s where I landed instead:

font-size: clamp(1.4em, 2.1vw, 2.1em);

That’s what I did to make the card title’s size adjust against the screen size but, like we discussed much earlier when talking about fluid type, we won’t be able to size the text by the parent container’s width.

Instead, we’re basically saying this with that one line of CSS:

I want the font-size to equal to 2.1vw (2.1% of the viewport width), but please don’t let it go below 1.4em or above 2.1em.

This maintains the title’s prioritized importance by allowing it to stay larger than the rest of the content, while keeping it readable. And, hey, it still makes grows and shrinks on the screen size!

And let’s not forget about responsive images, The content requirements say the image is the most important piece in the bunch, so we definitely need to account for it and make sure it looks great at all screen sizes. Now, you may want to do something like this and call it a day:

max-width: 100%;
height: auto;

But that’s doesnt always result in the best rendering of an image. Instead, we have the object-fit property, which not only responds to the height and width of the image’s content-box, but allows us to crop the image and control how it stretches inside the box when used with the object-position property.

img {
  max-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
}

As you can see, that is a lot of properties to write down. It’s mandatory because of the explicit width and height properties in the HTML code. If you remove the HTML part (which I don’t recommend for performance reason) you can keep the object-* properties in CSS and remove the others.

An alternative recipe for no media queries

Another technique is to use flex-grow as a unit-based growing value, with an absurdly enormous value for flex-basis. The idea is stolen straight from the Heydon Pickering’s great “Holy Albatross” demo.

CodePen Embed Fallback

The interesting part of the code is this:

/* Container */
.recipe {
  --modifier: calc(70ch - 100%);


  display: flex;
  flex-wrap: wrap;
}


/* Image dimension */
.pizza-box {
  flex-grow: 3;
  flex-shrink: 1;
  flex-basis: calc(var(--modifier) * 999);
}


/* Text content dimension */
.recipe-content {
  flex-grow: 4;
  flex-shrink: 1;
  flex-basis: calc(var(--modifier) * 999);
}

Proportional dimensions are created by flex-grow while the flex-basis dimension can be either invalid or extremely high. The value gets extremely high when calc(70ch - 100%), the value of --modifier, reaches a positive value. When the values are extremely high each of them fills the space creating a column layout; when the values are invalid, they lay out inline.

The value of 70ch acts like the breakpoint in the recipe component (almost like a container query). Change it depending on your needs.

Let’s break down the ingredients once again

Here are the CSS ingredients we used for a media-query-less card component:

  • The clamp() function helps resolve a “preferred” vs. “minimum” vs. “maximum” value.
  • The flex-basis property with a negative value decides when the layout breaks into multiple lines.
  • The flex-grow property is used as a unit value for proportional growth.
  • The vw unit helps with responsive typography.
  • The object-fit property provides finer responsiveness for the card image, as it allows us to alter the dimensions of the image without distorting it.

Going further with quantity queries

I’ve got another trick for you: we can adjust the layout depending on the number of items in the container. That’s not really a responsiveness brought by the dimension of a container, but more by the context where the content lays.

There is no actual media query for number of items. It’s a little CSS trick to reverse-count the number of items and apply style modifications accordingly.

CodePen Embed Fallback

The demo uses the following selector:

.container > :nth-last-child(n+3),
.container > :nth-last-child(n+3) ~ * {
  flex-direction: column;
}

Looks tricky, right? This selector allows us to apply styles from the last-child and all it’s siblings. Neat!

Una Kravets explains this concept really well. We can translate this specific usage like this:

  • .container > :nth-last-child(n+3): The third .container element or greater from the last .container in the group.
  • .container > :nth-last-child(n+3) ~ *: The same exact thing, but selects any .container element after the last one. This helps account for any other cards we add.

Hugo Giraudel’s “Selectors Explained” tool really helps translate complex selectors into plain English, if you’d like another translation of how these selectors work.

Another way to get “quantity” containers in CSS is to use binary conditions. But the syntax is not easy and seems a bit hacky. You can reach me on Twitter if you need to talk about that — or any other tricks and tips about CSS or design. pastedGraphic.png

Is this future proof?

All the techniques I presented you here can be used today in a production environment. They’re well supported and offer opportunities for graceful degradation.

Worst case scenario? Some unsupported browser, say Internet Explorer 9, won’t change the layout based on the conditions we specify, but the content will still be readable. So, it’s supported, but might not be “optimized” for the ideal experience.

Maybe one day we will finally get see the holy grail of container queries in the wild. Hopefully the Intrinsic Web Design patterns we’ve used here resonate with you and help you build flexible and “intrinsicly-responsive” components in the meantime.

Let’s get to the “rea” reason for this post… the pizza! ?

Gluten free pan pizza recipe

You can pick the toppings. The important part is the dough, and here is that:

Ingredients

  • 3¼ cups (455g) gluten free flour
  • 1 tablespoon, plus 1 teaspoon (29g) brown sugar
  • 2 teaspoons of kosher salt
  • 1/2 cube of yeast
  • 2½ cups (400 ml) whole almond milk
  • 4 tablespoons of melted margarine
  • 1 tablespoon of maizena

Instructions

  1. Mix all the dry ingredients together.
  2. Add the liquids.
  3. Let it double size for 2 hours. I’d recommend putting a wet dish towel over your bowl where the dough is, and place the dish close to a hot area (but not too hot because we don’t want it to cook right this second).
  4. Put it in the pan with oil. Let it double size for approximately 1 hour.
  5. Cook in the oven at 250 degrees for 20 minutes.

Thanks Stéphanie for the recipe ?

The post How to Make a Media Query-less Card Component appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Come to Web Unleashed!

September 1st, 2020 No comments

(This is a sponsored post.)

Web Unleashed is a fun conference. I’ve been a number of times. I’m sure you won’t be surprised that it’s online this year, like most events.

And, hey, it’s coming up and will take place over three days, October 5-7, 2020. I’d really like to see you there, not just because you’re going to get a lot of it (which you will), but because I’ll be there emceeing the show on October 5th, right after Jason Pamental does the opening. I’m also interviewing a wonderful mystery guest which is sure to be both fun and interesting.

But you can expect much, much more over the three days that Web Unleashed takes place. I mean, just look at the lineup.

Tickets are $249 Canadian. If you’re looking for a discount, I’ve got one right here that will knock $100 off the registration. Use coupon code CSS-Tricks when registering for the event to get the special price. Just make sure you do it soon because it’s only valid until September 10. And, yes, group discounts are also available. I’m gonna say that again but bigger:

Use coupon CSS-Tricks because it’s literally 40% off the already-affordable ticket price, but you have to do it before September 10, 2020.

Oh, and one more thing! Check out the artwork for the event:

It’s beautiful, right? That was done by Matt Deslauriers and was the inspiration behind a little tool I put together that creates random generative art that can be exported as SVG and PNG. I told you his was way cooler.

Direct Link to Article — Permalink

The post Come to Web Unleashed! appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Categories: Designing, Others Tags:

Guide to Effective B2B Marketing for 2020

September 1st, 2020 No comments

Even before the COVID-19 pandemic, the prospect of a contentious election in the United States and lackluster financial projections worldwide were clouding business horizons. Business-to-business (B2B) marketers’ strategies for 2020 are “overridden by one factor more than any other: uncertainty,” says Polly Kay, senior marketing manager at English Blinds.

Compounding the grim human costs of the pandemic, the economic disruption has pulled the rug out from under B2B marketing departments that traditionally rely on trade shows for face-to-face introductions to new clients. The spread of COVID-19 across the world forced cancellation of approximately 500 trade shows worldwide, erasing 270,000 full-time equivalent (FTE) jobs worldwide and $26.2 billion per month in global economic activity.

BB2B marketing

“B2B firms are already seeing the beginnings of disruptions that are going to continue throughout the rest of the year, and quite possibly beyond it, too,” Kay says.

How can you adapt your B2B marketing to cope with this extreme situation? How can you keep your lead funnel full when events, the largest slice of most B2B marketing budgets, are suspended? What are the best ways to nurture leads into deals using digital channels exclusively?

We worked with experts to find the answers, which we offer in this comprehensive guide to B2B marketing for 2020.

Chapter synopsis

This guide consists of five chapters:

  • Chapter 1: Introduction.
  • Chapter 2: What is B2B marketing? What defines B2B marketing? How does it differ from B2C marketing? We cover the basics as well as the trends in the industry both now and in the future.
  • Chapter 3: Top B2B marketing KPIs. We discuss the key performance indicators B2B marketers need to track, and review some leading apps and digital tools to automate metric tracking.
  • Chapter 4: The most effective B2B marketing channels. Flip ahead to this chapter to learn more about the major marketing channels from a B2B perspective — social media, email, video, and search — as well as the state of event-based B2B marketing.
  • Chapter 5: Examples of great B2B marketing. Lessons from six of the top B2B marketing campaigns of years past.

Each chapter stands on its own, so feel free to skip ahead for answers to specific questions. And remember to bookmark this page. Much of what we cover is evergreen. The lessons we’re learning now may prove remarkably useful in the inevitable crises to come.

What is B2B marketing?

What do local radio spots aimed at small business owners, a business networking happy hour, volunteering on the board of the local chamber of commerce, and making presentations at trade shows have in common? Each is an example of B2B marketing, a term that encompasses so much that it’s hard to define succinctly.

What is B2B marketing?

Let’s break the term down into its component parts. B2B stands for “business-to-business.” Compare B2B companies to B2C, or “business-to-consumer,” operations. If you sell candy bars to the general public, you operate a B2C business. If you sell boxes of candy bars to corporate employee snack programs, you’re in the B2B space.

B2B marketing

Here’s the American Marketing Association’s definition of marketing:

Marketing is the activity, set of institutions, and processes for creating, communicating, delivering, and exchanging offerings that have value for customers, clients, partners, and society at large.

To put it all together, B2B marketing involves communicating one company’s products or services (including software as a service) to other businesses and organizations. B2B is marketing between companies, as opposed to marketing by one company to the public at large.

B2C vs B2B marketing

Consumers are individuals who purchase products or services from a company. Most successful B2C marketing campaigns use simple messaging, emotional arguments, and wide targeting.

The B2B audience is different. They are much more analytical when making purchasing decisions. Far less interested in fads, they value what improves productivity and eliminates waste. Business buyers demand to know exactly how your offering is worth their money. Here’s a snapshot of the B2B vs B2C marketing dichotomy:

  • In B2B marketing, there is rarely a single decision-maker. More often than not, it’s a team of people. In a sense, “business-to-business” is a misnomer. All marketing is between people, after all. But in the B2B space, you may have to address the needs and preferences of multiple stakeholders within a company to seal the deal. B2C campaigns are more likely to rely on emotional appeals to an individual.
  • The B2B sales cycle is a lot longer than B2C. On one hand, this means there are more opportunities for your prospects to jump ship. But it also means you have more time to share crucial, decision-changing information and to cultivate a relationship for the long run.
  • B2B marketing campaigns are more data driven than B2C campaigns. A chief financial officer isn’t persuaded because your copy is pithy. They care how your business will provide a good return on investment. You need numbers to make your case.

For more on the differences between B2B and B2C marketing, check out our blog.

The unique characteristics of B2B marketing are clear when you examine recent industry trends. Below are some key B2B marketing trends already gaining momentum and what some experts believe marketers can expect in the years to come.

B2B marketing trends

Digital connections have been increasingly important for B2B marketers for years, and the pandemic will accelerate that trend, says Lance Cummins, founder of Nectafy and Anyvoo.

“What you’re seeing now is a huge acceleration of a gradual trend, which is that you’ve got to learn to deal with your audience digitally,” Cummins says. “You’ve got to get people to pay attention to you, even if you’re not physically standing in their way at a trade show.”

The numbers support Cummins’s point. In 2019, U.S. marketing spend for offline media declined by 5.9 percent, reports Winterberry Group’s Outlook for Data Driven Advertising & Marketing 2020, while budgets for online marketing efforts grew 19.1 percent.

Two of the three traditional marketing categories that helped offset the overall decline in offline spending in 2019 were outdoor media (billboards, posters) and experiential marketing (events). It seems likely that widespread stay-at-home orders will affect those two categories in 2020, hastening the decline of traditional marketing channels.

Here are a few more of the trends marketers are following this year:

  • Content marketing remains a big part of digital attention seeking, but increasingly savvy B2B audiences will demand higher quality, demonstrably useful material, Cummins says. “The future of content marketing, and this is not revolutionary, is literally about this: How do we provide more substantive help?” he says. “The noise is so much greater [in 2020]; therefore your focus has to be narrower. Your expertise has to be more helpful rather than self-interested.”
  • Marketers in the coming years will benefit from a shift in branding away from the company toward the individuals who work there, says Alex Panagis, founder of ScaleMath. “In previous years, businesses would choose to work with a specific company because of the name value in the industry,” Panagis says. “That is not really the case anymore. Businesses buy into people they like and believe share the same common values as them.” To take advantage of this trend, consider positioning employees as thought leaders, investing in their personal brands, and nurturing their personal audiences.
  • In the near future, personalized messaging, not big data, could be what makes the difference between gaining a lead and driving one away. “In previous years, everyone has been too focused on automating their marketing, sending templated and canned emails to get maximum results with the minimum investment,” says Adam Hempenstall, CEO and founder of Better Proposals. “It’s not working anymore, and B2B audiences crave personalization. Take your time, craft personalized marketing messages, and you will see your open rates and response rates increase significantly.”

If you invest in these suggestions, how will you measure your results? B2B marketers must collect data to verify the effectiveness of their efforts — which brings us to the subject of marketing KPIs.

Top B2B marketing KPIs

Key performance indicators, or KPIs, are the metrics that describe an organization’s progress toward its most important goals. KPIs range from broad data points, such as total yearly profit and sales by region, to very granular information, like contact volume by channel and new vs repeat site visits per month.

Every part of an enterprise has its own set of KPIs. Marketers use KPIs to track their successes and make necessary improvements — which is why we call them “key.”

B2B marketing KPIs

Which KPIs are most important for marketers to track? That depends entirely on your goals. Here are 10 KPIs that no experienced marketer will ignore.

10 B2B marketing KPIs

  1. Site traffic. Most B2B websites serve multiple functions: They’re online sales hubs, industry resources, and communication points for customers. But no function is more important than generating leads. The more visitors you have, the more opportunities you have to convert those visitors into leads.
  2. Return on ad spend (ROAS). Did your last pay-per-click (PPC) campaign generate a profit? Did you target the right markets on your last billboard spend? Tracking ROAS is the only way to find out.
  3. Cost per lead (CPL). Every lead costs something. Tracking fluctuations in that cost over time can tell you a lot about inbound marketing and other lead-generation efforts. “That number should be coming down over time, if you’re doing a good job,” Cummins says. If it doesn’t, reconsider your strategy.
  4. Average revenue per customer (ARPC). Knowing the value of each customer makes it easier to allocate an effective marketing budget for both retention and drawing in new business.
  5. Conversion rates. Don’t just measure conversion rates in terms of sales but at each stage of the marketing funnel. “In content marketing, that’s going to be visitors to leads to some point in your sales process, down to becoming a customer,” Cummins says. “You need to have some sort of insight into conversion rates along those lines.”
  6. Click-through rate (CTR). This metric is crucial for measuring the effectiveness of PPC ad campaigns. The organic click-through rate measures how many visitors reach your site through search. This is an extremely important measure of the effectiveness of content marketing campaigns.
  7. Contact form conversions. Are your contact forms performing up to their full potential? Do you need to redesign them or place them somewhere else on your site? Find out by tracking the number of contact form impressions versus form completions.
  8. Customer churn. This is a ratio of the number of lost customers to the total number of customers at the beginning of the study period. A high churn rate indicates a problem. Either you’re not satisfying customers, or you need to invest in customer retention marketing strategies.
  9. Pipeline velocity. Measure how long it takes for a prospect to move through your B2B marketing funnel, from lead to customer. This figure tells you how effectively you’re nurturing leads. The B2B sales cycle is notoriously longer than B2C, but targeted marketing campaigns speed it up.
  10. Customer satisfaction. Wait a second, you might say. Isn’t this a customer service metric rather than a marketing KPI? Not necessarily. Customer satisfaction is the main goal of any successful business. Dissatisfied customers are an indication that your marketing materials are overpromising or misrepresenting your offerings.

Now that you have a few B2B marketing metrics to track, you’ll need tools to make sense of all those numbers. There are plenty of SaaS options, and even many free online tools, that provide KPI tracking and analytics for B2B marketers.

B2B marketing analytics tools

Your KPI numbers are just raw data. Turning that data into usable intelligence requires analytics tools. Every digital channel you use, from search engines to each individual social media account, generates its own data. Most of these services offer some degree of native analytics, but logging into every one of them every time makes it hard to write meaningful reports.

Marketers use analytics tools to organize the data from a wide variety of sources. Marketers and executives build custom dashboards — personalized analytics pages that display data visually — to gauge a campaign’s success against particular goals on a single screen.

Here are some of the leading marketing analytics tools on the market:

  • Adobe Analytics. Adobe’s enterprise-level analytics software tracks both online and offline data, with advanced AI algorithms for predictive analysis. But this full-service analytics platform prices out many small and medium-sized businesses. One recent review estimated costs of between $30,000 and $350,000 per year.
  • Google Analytics. The free version of Google Analytics is an essential tool for measuring site traffic, onsite behavior, pay-per-click effectiveness, and any number of conversion types. If a data point ties into your website, Google Analytics can probably track it. If you were starting a digital-only marketing analytics project from scratch, this would be a good place to start. The free version provides plenty of data, but a paid version — Google Analytics 360 — provides enterprise-level services on par with Adobe Analytics (with pricing reportedly around $150,000).
  • HubSpot. HubSpot is an integrated growth platform that combines a free customer resource management tool with related software hubs for sales, customer service, and marketing. HubSpot’s analytics focus on inbound marketing KPIs to help marketers convert visitors into leads and leads into customers. Pricing depends on the number of leads you wish to track as well as access to advanced services. The Marketing Hub ranges from $50 per month to $3,200 per month at the time of this writing.
  • SEMRush. Like its competitor, Moz, SEMRush provides marketing analytics specifically for search engine optimization (SEO). It’s built to track SEO-related KPIs like site traffic, CTR, and keyword rankings. Both SEMRush and Moz start at just $99 per month. While each platform has its partisans, the general opinion is that Moz is easier to use for beginners, while SEMRush is more powerful for experienced digital marketers.

Analytics platforms segment your data, but not all of them automatically import data from all channels — especially if you go beyond digital marketing. Before choosing an analytics platform, consider which channels your audience engages with. Let’s look at the leading marketing channels B2B marketers use to draw in new leads and turn them into customers.

The most effective B2B marketing channels

Marketers are naturally focused on their messaging, but where a message appears is as important as any nuance of wording. Placement is an acute consideration for the full range of media channels, from magazines and billboards to search engines, social media, and email.

It doesn’t matter how great your message is if you don’t place it where your customers will engage with it. Your B2B marketing begins with a thorough understanding of your customers, their needs, and where they seek information on products and services relevant to their business. When you have that mapped out, you can determine whether to focus on social, search, or some other space entirely.

Here are some of the most powerful B2B marketing channels that will build and replenish your sales funnel for a continuous supply of leads, no matter how challenging the business environment.

social media marketing

Social media marketing

Facebook, Instagram, Twitter, LinkedIn, even Reddit, are all powerful platforms for B2B marketers to connect with audiences. Facebook is famous for its low-cost, broad-reach PPC platform. Paid social ads on LinkedIn cost more but typically bring in better B2B leads. (Learn more about the difference between Facebook and LinkedIn for B2B PPC advertising on our blog.)

Social media is much more than just the place for PPC ads, says Ambreen Sharif, cofounder and digital marketing consultant at Workplay Digital. Organic shared media dovetails well with other channels, both online and offline.

“Use LinkedIn to promote your upcoming webinar or offline event,” Sharif says. “Your followers will share it with their networks, colleagues, and friends. Even if they just ‘like’ your post, it’s more likely to appear in their network’s feed.”

Email marketing

Email marketing is still going strong in 2020 — just look at the “promotions” tab in any professional’s inbox. The question is, how can marketers best leverage this outbound strategy when an email open rate of 15 to 25 percent is considered high?

“You face a difficult task, to go from unwelcome spam to welcome business conversation,” says Cummins. “That is a tough, tough transition.”

Instead, he says, permission-based email outreach may soon generate more value as the world embraces the EU’s General Data Protection Regulation (GDPR), which requires marketers to allow recipients to opt out of email campaigns.

“Email is still essentially the hub of how business works,” Cummins says. “It’s critical.” Just be sure to ask for permission to stay on the right side of your audience. One easy way to begin these customer-driven email relationships is to post an email list form on your website so that visitors can subscribe to your newsletters or updates.

Video marketing

Most internet users watch video online, but that doesn’t mean B2B customers have stopped reading. “I don’t see video marketing as a standalone approach,” says Cummins. “It crosses all channels. You’ve got to integrate it.” Cummins advises adding video clips to outbound emails, or using them to enhance written content. “It has to have a place to live and breathe,” he says.

Regardless of where you post video content, the medium is ideal for explaining complex subjects. Sharif recommends beginning your video strategy with an “explainer video” that clearly explains a difficult subject within your industry.

“Choose a topic that you’re an expert in and that would be of interest to your audience,” she says. “Create a short, high-quality video explaining the concept in simple terms. It’s valuable, it’s shareable, and it demonstrates your expertise in a creative way.”

Event marketing

Prior to the COVID-19 pandemic, the exhibition industry had been growing steadily for years. As recently as the third quarter of 2019, it grew by 0.6 percent because, by one estimate, exhibiting at a trade show can reduce the cost of a sale by up to 75 percent.

The coronavirus has disrupted trade shows, at least for the time being. The Center for Exhibition Industry Research estimates that up to 80 percent of U.S. trade shows planned for March 1 through May 15 had been canceled. However, CEIR economist Allen Shaw told Trade Show News Network, “Since this is a transitory event, we expect a full recovery for the exhibition industry in 2021.”

Trade shows will return eventually, because there is no real substitute for handling a product and discussing it with someone who can answer all your questions. Sharif advises using this down time to determine how to drive higher attendance in future years.

“It’s not enough to just show up, hand out some business cards and hope for the best,” she says. “It’s worth the extra investment to have a speaking opportunity to demonstrate your expertise and showcase an all-star on your team who’s not only an expert but an engaging and personable speaker.”

Event marketing isn’t an entirely offline strategy. Enhance your booth or presentation by using mobile devices to access on- or offline mobile data-collection forms that let you collect lead information anywhere on the exhibition floor.

Content marketing

“Content marketing” refers to the production and publication of helpful materials that are offered for free to a valuable audience. It’s part of the broader technique of “inbound marketing,” which encourages clients to reach out to the selling company rather than the other way around.

Nearly 90 percent of B2B purchasers perform online research when looking for a new product or service. This makes an inbound marketing strategy extremely valuable to B2B companies. Providing candid answers to your audience’s research questions is powerful. Never doubt that good content will surface at the top of their search results.

Engaging with savvy B2B audiences requires a content strategy focused on the reader. Cummins advises marketers to ask themselves two questions as they work on content: “What is the user looking for? And, are we providing that in a really helpful, engaging, intelligent way, human to human?” Successful inbound marketing content boils down to a single two-word goal, Cummins says: “Be helpful.”

Marketing channels don’t exist in a vacuum. Some of the most successful B2B marketing campaigns of the past few years used multiple channels to reach highly specific audiences. To learn what may work in the future, let’s take a look at the B2B marketing efforts that produced great returns in the past.

Examples of great B2B marketing

The suspension of in-person events has been a setback for gregarious B2B marketers, but even when trade shows were going strong, many of the most effective campaigns of recent years were on digital channels.

If you’re looking for alternatives to your usual booth at a trade show, start by looking at a few digital campaigns. These pre-2020 B2B marketing campaigns demonstrate an impressive range of innovation and can help you navigate this unusual business environment.

B2B marketing examples

Upwork: Hey World

“Remember that even with B2B marketing, you’re speaking to a person,” says Sharif. “Ultimately, people are making purchasing decisions, and they’re the ones you have to win over.”

Humor, pop culture fluency, and a touch of irreverence all win people over. The freelancer platform Upwork used all three in its 2018 “Hey World” campaign, which featured (gentle) trash-talking copy like, “Hey Mr. President! Need a social media strategist?” and “Hey Comic Sans user! Need some graphic design help?”

The campaign made the argument that Upwork’s freelancers can help with any business challenge confronting the viewer. It played out on billboards, digital video, and radio, and won a Drum B2B Award for best brand campaign in 2018.

Square: Town Square

Digital payments company Square doesn’t call its flagship content marketing page a “blog.” They call it the Town Square Business Resource Center to reflect the company’s commitment to providing not just “content” but resources.

This is where Square publishes useful information for a small business audience, which helps boost traffic via search. Square’s writers cover regulatory updates and growth strategies, as well as personal stories of business success. It’s all easily searchable, with filters based on topic, business type, and content type.

Town Square demonstrates Square’s investment in its customers, according to Khobi Brooklyn, who was the director of product communications and marketing at Square during the rollout of the campaign. Brooklyn told First Round Review that “it’s important to show how much you value your customers. We try to take every chance we have to celebrate small business owners, because that’s core to who Square is.”

Dropbox: Marketing Dynamix

Dropbox has evolved from a file-sharing platform into a “smart workplace” innovator focused on new audiences in the business world. In 2017, Dropbox launched an interactive campaign just for marketers called “Marketing Dynamix.”

Through multichannel outreach, Dropbox invited marketers to take a personality test to answer the question, what kind of marketer are you? Individual team members were categorized as one of a variety of marketer types so team leaders could plan more effective communications strategies.

A dedicated Marketing Dynamix microsite allowed visitors to take the test, share results, and browse personalized content based on results. By the end of 2018, the campaign had generated more than 2,000 marketing qualified leads and an estimated return on investment of 25 to 1.

HP: The Wolf

Christian Slater stars as a nefarious hacker in a tense narrative thriller — but this wasn’t the TV series Mr. Robot. It’s “The Wolf,” an online video ad campaign from HP. The company took its cue from Hollywood rather than PowerPoint, a rarity in the B2B media ecosystem.

The dramatic series originally streamed on YouTube. It kept viewers on the edges of their seats while illustrating the danger of an unsecured business printer. That security risk is, of course, a problem that HP solves with its line of secured smart printers.

By aiming at the pulse of the business audience, rather than its spreadsheets, “The Wolf” racked up more than 12 million YouTube views in its first two months. The campaign also appeared in 118 earned media placements globally. The flagging printer industry saw B2B sales increase by 6 percent.

This series highlights the value of high-quality storytelling in video marketing campaigns in the B2B space, even if you don’t have the kind of budget HP invested in “The Wolf.”

PathFactory: GDPR Wars

After the European Union implemented the General Data Protection Regulation (GDPR) in 2018, business prospects were inundated with requests for email marketing opt-ins, as required by the standard. These requests were typically dense with legalese that prospects found easy to ignore. An alarming number responded by opting out, not in.

Knowing that its email would be just one among many, content platform PathFactory took a different approach. The company’s marketers framed its opt-in request in terms of a pop culture icon: Star Wars.

GDPR Wars was a single opt-in email that, in three paragraphs, positioned GDPR as a rebellion against impersonal marketing and aligned PathFactory with the “good guys” while fully complying with the new rules for opting in to email contact.

The GDPR Wars email outperformed previous PathFactory email campaigns by 241 percent. It garnered lots of shared media and won a Demand Gen Report Killer Content Award. The lesson?

“If GDPR Wars teaches you anything it’s that you should not be afraid to have fun in your marketing,” writes Evan Doyle on the PathFactory blog. “Regardless of how ‘dry’ the topic is, take some extra time and effort to inject your brand’s personality into your work. It will give your audience a reason to keep coming back.”

Samsung: Big & Small

Samsung released the Galaxy Note 8 in Europe with a content-rich campaign based on the premise of large and small businesses learning from each other. “Big & Small — How to Do Bigger Things in Business” featured an original study of business trends, an in-person panel debate, and two short films documenting how employees use the Galaxy Note 8 in their daily lives.

The film about big business, called “Aiming Higher,” is a masterclass in the power of video to show the value of a product. “Aiming Higher” follows an international sales director at an unnamed but clearly global B2B company.

The sales director rhapsodizes about his Galaxy Note 8 with a long list of concrete examples of its usefulness. The video positions Samsung’s device as a “mobile office,” ideal for fast-paced B2B operators.

In total, Big & Small led to a 26 percent increase in B2B sales for Samsung over the previous year. The content reached more than 10 million viewers throughout Europe and the films garnered 250,000 views.

B2B marketing beyond 2020: Continued digital growth

The global uncertainty of early 2020 will pass. Markets will rally, and marketers will return to trade shows. Global business leaders will again jet around the world to seal deals in person. But the marketing trends that the 2020 pandemic accelerated are unlikely to fade away.

“Companies have to figure out these questions,” Cummins says. “How do we leverage content online? How do we leverage other digital tools to get in front of people?”

No matter when you read this guide, in 2020 or after, digital communications remain crucial for great B2B marketing. Make those online connections with your audience using marketing templates from JotForm, which range from subscription forms to user experience surveys, and everything in between.

Categories: Others Tags: