Tag Archives: holidays

Thumbnail

Get Your Mobile Site Ready For The 2018 Holiday Season




Get Your Mobile Site Ready For The 2018 Holiday Season

Suzanne Scacca



After reading the title of this article, it might seem like it’s jumping the gun, but with retailers turning on holiday music and putting out holiday-related displays earlier and earlier every year, your consumers are primed to start thinking about the holidays earlier, too. In fact, a study done by the Tampa Bay Times revealed that in-store shoppers were exposed to holiday music as early as October 22 in 2017.


Holiday music in retail


Results from TBT’s survey on when holiday music starts (Source: Tampa Bay Times) (Large preview)

Of course, e-commerce handles the holiday season a bit differently than brick-and-mortar. It’s not really necessary to announce promotions or run sales in late October or early November. However, that doesn’t mean you should wait until the last minute to prepare your mobile website for the holidays.

In this article, I’m going to give you a quick rundown of what happened during the 2017 holiday sales season and, in particular, what role mobile played in it. Then, we’re going to dig into holiday design and marketing tactics you can use to boost sales through your mobile website for the 2018 holiday season.

Recommended reading: How Mobile Web Design Affects Local Search (And What To Do About It)

A Recap Of The 2017 Holiday Sales Season

Before we get started, I want to quickly add a disclaimer:

This particular section focuses on e-commerce statistics because this kind of data is readily available. Something like the total number of page visits, subscribed readers, and leads generated… well, it’s not.

So, although I only use data to express how important mobile was to 2017 holiday sales, keep in mind that the tips that follow pertain to all websites. Even if your site doesn’t expressly sell goods or services, blogs and other content-driven sites can take advantage of this, too!

Now, let’s take a look at the numbers:

Total Retail Sales

The National Retail Federation calculated the total amount of retail sales–online and in-store–to be $691.9 billion between November and December, a 5.5% bump from 2016.

Total e-Commerce Sales

Adobe put the total amount of e-commerce sales during that same timeframe at $108.15 billion in 2017.


2017 holiday e-commerce revenue


Adobe’s stats on 2016 and 2017 holiday e-commerce revenue (Source: Adobe) (Large preview)

e-Commerce Sales By Device

Adobe takes it even further and breaks down the share of revenue by device:


Device-specific sales during 2017 holidays


Breakdown of desktop, smartphone and tablet sales for 2017 holiday season (Source: Adobe) (Large preview)

e-Commerce Sales vs. Traffic

While smartphone and tablet sales still trail those on desktop, there are a couple interesting things to note here. For starters, desktop revenue has mostly flatlined year-over-year whereas mobile continues to grow. In addition, there’s an interesting disparity between how much traffic comes from each device and what percentage of revenue it generates:


Traffic vs. revenue breakdown


Traffic vs. revenue for desktop, smartphone, tablet (Source: Adobe) (Large preview)

Pay close attention to desktop and smartphone. As you can see, more visits stem from smartphones than any other device and, yet, desktop leads the way in conversions:


Conversion rates by device


Statista shows the breakdown between desktop, smartphone, and tablet conversions in Q1 2018 (Source: Statista) (Large preview)

Is this indicative of a lack of trust in smart devices to handle purchases?

In all likelihood, it probably isn’t. Data from other sources indicates that on holidays, in particular, mobile reigns supreme in terms of visits and conversions:

  • Thanksgiving Day: 62% of traffic / 46% of purchases.
  • Christmas Day: 68% of traffic / 50% of purchases.

Also, let’s not forget to take into account the strengths of mobile devices within the shopper’s experience. According to the four micro-moments as defined by Google, a large number of mobile users commonly search for the following:

  • “I want to know.”
  • “I want to go.”
  • “I want to do.”
  • “I want to buy.”

The second and third are clearly indicative of a searcher’s desire to find something outside their devices (and their homes) to spend money on. That might even be so for the fourth, though it could also be an indication that they want to do their research on mobile and complete the purchase on desktop.

Either way, we know that smartphones tend to be a primary facilitator in the customer’s journey and not something that’s putting an end to the shopping experience as a whole.

Recommended reading: Designing For Micro-Moments

5 Tips To Prepare Your Mobile Site For The 2018 Holiday Season

While the overall numbers indicate that desktop is the leading platform for holiday sales, it’s not a universal rule that can be applied to each and every day in November and December. This is why your own data will have to play a big role in the design choices you make for your mobile site this season.

You have to admit, no matter how stressed or unhappy you might feel around the holidays, there is something nice about encountering just the right hint of holiday “cheer”. And that’s one of the keys to doing this right: finding the right amount of holiday flavor to infuse into your website.

Before we get into what you can do to spruce up your mobile web design, I want to remind you that security and speed are critical elements to check off your list before November gets here. These might not be in your realm of responsibilities, but that doesn’t mean you shouldn’t keep an eye on them.

If you’re doing all this design work in anticipation of boosting conversions over the holidays, don’t let it all be for nothing by forgetting about performance and security essentials. To protect your site from potentially harmful traffic surges, start with this front-end performance checklist. With regards to security, you can use these security improvement tips.

Now, let’s talk about the five ways in which you can prepare your mobile website for the 2018 holiday season:

1. Study Last Year’s Data

If your website has been live and actively doing business for more than a year, you need to start with the data from 2017. Using Google Analytics and your CRM platform, locate answers to the following questions:

What was the prominent device that generated traffic? Sales?

Google Analytics allows you to divvy up traffic based on technology in a number of ways:

Under Browser & OS, you can sort visitors by browser:


Google Analytics browser data


Google Analytics shows which browsers users visited from (Source: Google Analytics) (Large preview)

There is a small tab at the top of the table for “Operating System”. Click that to reveal which OS were used:


Google Analytics operating system data


Google Analytics breaks down traffic by operating system (Source: Google Analytics) (Large preview)

You can use the MobileOverview tab to look at the simple breakdown between desktop, mobile, and tablet users.


Google Analytics device data


Google Analytics division between device traffic (Source: Google Analytics) (Large preview)

Really, your goal here is to weed out desktop users so you can focus strictly on mobile traffic as you assess the following data points.

When did your site experience an increase in traffic in November or December?

Every website’s holiday traffic history will look a little different. Take mine, for example:


A sample Google Analytics holiday traffic chart


An example of holiday traffic up and downs in Google Analytics (Source: Google Analytics) (Large preview)

My business really isn’t affected by the holidays at all… except that I know things are going to be super quiet on and around Thanksgiving and the major holidays in December. This is still important information for me to have.

For businesses that directly sell products or services through their site or content-based sites that plan publication schedules based on traffic, you’ll likely see a different trajectory in terms of highs and lows.

When did sales start to increase (if they don’t coincide with traffic)?

Again, for some of you, the matter of sales is irrelevant if you don’t offer any through your site. For everyone else, however, use the Google Analytics Conversions tab along with sales logged through your payment gateway or CRM to check this number.

Just remember that you have to activate the Conversions module in Google Analytics if you want it to track that data. If you didn’t remember last year, put it in place for this year.

Did the holiday uptick remain consistent until the end of the season or were there temporary dropoffs?

Much of this has to do with how you promote holiday-related events, promotional offers or content through your website. If you consistently market around the holidays from November 1 to the end of the year, you should see relatively steady traffic and sales.

Some days, of course, may be slower than others (like during workdays or earlier in the season), so it’s good to get a sense for the ebb and flow of your site’s holiday traffic. On the other hand, your website might be a major draw only on special sales days and the holidays themselves, so you can use this data to harness your energy for a big push on the days when it’ll have the greatest impact.

Try to identify patterns, so you can plan your design and marketing strategy accordingly.

When did traffic and sales return to their usual amount?

At some point, your site is going to see a dip in activity. There are some businesses that embrace this.

Let’s use Xfinity as an example. Around mid-November of last year, this is the holiday-centric message the top of the home page was pushing:


Xfinity holiday promotion


Xfinity promotes ways to make your home holiday ready (Source: Xfinity) (Large preview)

A month later, on December 9, any mention of the holidays was gone and replaced by a promotion of the upcoming Olympic Winter Games.


Xfinity December promotion


Xfinity stops promoting holidays in December (Source: Xfinity) (Large preview)

One can only assume that a major sporting event like the Olympics helps Xfinity sign more subscribers than trying to capture last-minute sales for the holidays.

Logically, this makes sense. December is a busy time for families. They’re planning travel, purchasing gifts and running around town in preparation for the upcoming celebrations. Most people probably don’t have time to set up a new cable or Internet package and wait around for Xfinity to configure it then.

Bottom line: it’s okay if your holiday-related traffic and sales drop off earlier than December 31. Study your data and let your user behavior guide you in your mobile design and promotion strategy.

What were the most popular sources for mobile traffic?

It’s actually not enough to identify the most popular sources of mobile traffic for your site. Sure, you want to know if organic SEO and social media promotional efforts worked to bring traffic to it… but it won’t really matter if those visitors abandoned the site without taking action.

When you start digging through the ways in which you acquired mobile visitors, make sure to review the sources and keywords used against other telling metrics, like:

  • Bounce rate
  • Time on site
  • Pages visited

This will give you a good sense for what sources — e.g. keywords, PPC ads, social media content, promotional backlinks from other sites — that attracted high-quality leads to it during the holiday season.

What were the most/least successful promotions?

One more thing to look at is what exactly performed the best between November and December with mobile visitors.

Did you run a pop-up promoting free shipping that was dismissed by most mobile visitors, but greatly taken advantage of by those on desktop? Did your custom home page banner touting an upcoming Black Friday sale get more clicks than the home page banner otherwise does at other times of the year? And what pathway resulted in the most conversions?

Dig into what exactly it was that appealed to your mobile visitors. Then, as you work on this year’s plan, focus on reproducing that success.

2. Assess The Navigation

The navigation plays two important roles on a website:

  1. High-level tabs inform visitors on what they’ll find on the site; essentially answering the question, “Is this of relevance to me?”
  2. The navigation itself provides visitors with shortcuts to parts of the site that matter most to them, simplifying their pathway to conversion.

When reviewing your navigation in the context of holiday traffic, you must ensure that it fulfills both of these roles.

Let’s look at two websites that provide relevant links during the holidays while also streamlining the visitors’ journey from entry to holiday-related pages.

Food52 is an online hub for people who enjoy cooking. You can buy kitchen gadgets from the site and peruse a whole bunch of content related to food and cooking.

I want to call out a number of things Food52 does especially well in terms of navigation:


Thanksgiving categories on Food52


The Food52 home page includes Thanksgiving-related categories (Source: Food52) (Large preview)

  1. The hamburger menu is prominently displayed in the top-left, which is exactly where visitors’ eyes will go as they follow the Z-shaped pattern for reading.
  2. The shopping cart, search bar shortcut and profile link are also displayed in the top header, making it easy to navigate to elements that support the shopping experience.
  3. If you scroll down on the home page (as I’ve done in the screenshot above), Food52 includes a good mix of Thanksgiving-related content along with its standard fare. In addition, it includes categories that help users filter through content that’s most relevant to them.

One other thing I’d like to point out is the navigation itself:


Simplified mobile navigation from Food52


Simplified and customized navigation from Food52 for Thanksgiving (Source: Food52) (Large preview)

There are a number of things you’ll notice:

  • The mobile navigation is quite simplified. Despite how many categories and types of pages the site has, the navigation keeps this from being an overwhelming choice.
  • There are special tabs for Thanksgiving and Holiday. This will get users directly to content related to the holiday they’re cooking for.
  • The Hotline — which is its customer service forum — is also featured in the mobile navigation. This element is especially important around the holidays when visitors have questions they need answered quickly.

L.L.Bean is another website that handles mobile navigation well.


L.L.Bean Navigation


L.L.Bean puts the essentials in the navigation (Source: L.L.Bean) (Large preview)

As you can see, there are four buttons located within the mobile header:

  • Hamburger navigation icon: bolded and well-placed;
  • L.L.Bean logo for easy backtracking to the home page;
  • A shopping cart icon which will keep stored items top-of-mind with mobile users;
  • An ever-present search bar to speed up navigation even further.

Once a mobile user expands the hamburger navigation, they encounter this:


L.L.Bean hamburger navigation


L.L.Bean prioritizes customer service and gifts around the holidays (Source: L.L.Bean) (Large preview)

As you can see, “Call Us” is the first option available within the mobile navigation. Again, with people in a rush and trying to get purchases done right over the holidays, having a direct line of communication to the company is important. The account link and “Ship To” personalization are also nice touches as these icons keep conversion top-of-mind.

Now, looking down the navigation, you’ll see this is a pretty standard mega menu. However, take note that at the very top of this category (as is the case for all others) appears a page for “Gifts”. This is not something you see the rest of the year, so that’s another holiday-related touch meant to streamline searches and sales.

3. Use Add-ons At Checkout

Here is everything you need to know to optimize conversions at mobile checkout. If I can add an additional two cents to this matter, though, I’d like to briefly talk about add-ons at checkout… but only around the holidays.

Typically, I believe that a fully streamlined checkout process is essential to capturing as many conversions as possible on mobile devices. It’s hard enough typing out all that information (if it doesn’t auto-populate) and trusting that devices and websites will keep payment information secure.

However…

When it comes to designing the checkout for holiday shoppers, I think it’s at least worth experimenting with add-ons. For example:

  • Promo codes
  • Free delivery options
  • Shorter, but more premium delivery or pick up in store options
  • Gift wrapping.

Nordstrom doesn’t even wait for visitors to get to the checkout to promote this.


Nordstrom free shipping


Nordstrom promotes free shipping and returns right away (Source: Nordstrom) (Large preview)

The very top of the site has a sticky bar promoting the free shipping and returns offer. This way, visitors are already in the mindset that they can get their Black Friday purchases or holiday gifts for even cheaper than planned.

Fitbit has another example of this I really like:


Fitbit holiday promotions


Fitbit promotes sales and free expedited shipping (Source: Fitbit) (Large preview)

The top-half of the Fitbit homepage gets visitors into the mindset that there are cost savings galore here. Not only are items on sale, but certain orders come with free and expedited shipping. And the site clearly states when the sale ends, which will keep customers from getting upset if gifts don’t arrive on time. (It will also probably motivate them to get their shopping done sooner if they want to cash in on the sale.)

So all appropriate expectations regarding pricing and shipping are set right from the very get-go, making checkout go more smoothly.

I know that some may argue these will be bad for UX (and normally I’d join them), but I don’t see them as distractions during the holidays. This is an expensive and busy time of year.

Anything you can add to checkout that says, “Hey, we’re thinking about you and want to make this holiday season go just a little more smoothly” would go over well with your users.

4. Give Images A Seasonal Touch

Images are a tricky thing this time of year. You want to use them to appeal to holiday-minded visitors, but you don’t want to overdo it because images add a lot of pressure to your server. You need your site running fast, so be smart about what you do with them.

  1. Resize them before you ever add them to your site. There’s no need to use oversized images if they’re going to appear smaller online.
  2. Optimize your images with compression tools before and after they’re added to the design. This will free up some space they would otherwise take.
  3. If your users’ journey starts above-the-fold, you might want to consider lazy-loading images.

That said, images can go a long way in communicating to visitors that your site and business are ready to spread some holiday cheer without having to ever explicitly say it. This might be the ideal choice for those of you who design websites for global audiences. Perhaps you’d rather use an image that evokes a festive feeling because you don’t want to unintentionally offend anyone who doesn’t celebrate the holiday your copy calls express attention to.

Here is a great example from Uncommon Goods:


Uncommon Goods holiday home page


Uncommon Goods holiday home page (Source: Uncommon Goods) (Large preview)

I wouldn’t necessarily say the images used here are festive, but there are unique elements that evoke a certain association with the holidays. Like the color green used within the photos. Or the partial glances of what appear to be snow globes. They’re seasonal elements, but not necessarily relegated to Christmas, Hanukkah or Kwanzaa.

Then, there’s the United States Postal Service (USPS) website. Granted, this website targets visitors within the United States, but it remains mindful of the differences in religions practiced and holidays celebrated.


USPS festive image


USPS uses a non-denominational image to promote the holidays (Source: USPS) (Large preview)

The message remains neutral as does the image itself. The USPS is simply trying to help people quickly and festively send holiday cards, gifts and other items to distant relatives and friends.

5. Review The Customer Journey

The factor of speed is a big one when it comes to designing the customer journey. While the navigation cuts down on any unnecessary steps that might be taken when visitors can afford a more leisurely pace, your design should expedite the rest.

In other words:

  • Start talking about holiday-related content, products, pages and links right on the home page.
  • Make sure you have at least one mention above-the-fold, whether it’s in the navigation, in a blog link or in a seasonal promo.
  • Use the data from last year to streamline the ideal pathway from the home page to conversion.
  • Walk through that pathway as a visitor on both desktop and mobile. Is it as clear, concise and direct as possible?
  • Check the responsiveness of the pathway. Your site, in general, needs to be responsive, but if you’re optimizing a certain journey for visitors and you want them to convert on mobile, then extra care needs to be taken.

Below is another example from the Food52 website from the holidays. As you can see in this snippet, two kinds of holiday-related content are promoted. What’s cool about them, though, is that it’s not necessarily in-your-face.


Food52’s festive home page design


Food52 adds a holiday touch to its home page design and copy (Source: Food52) (Large preview)

The relish recipe could easily be used any time of the year. However, because pomegranates are often considered a winter food, this falls into the category of holiday-related content. The second post is more blatant about attracting holiday readers.

The final element in this screenshot is also worth taking note of. To start, it appears they’ve customized the copy specifically for this time of year. All it takes is one addition of the word “joyfully” to let visitors know that Food52 took time to make its site just a little more festive.

I also want to give them kudos for including a newsletter subscription box here and in other key areas of the site.

If the research from Adobe is right and only about half of mobile visitors convert, then this is a smart design choice. This way, Food52 can collect visitor information on mobile and contact them later. When interested visitors receive the reminder at a more convenient time and place, they can hop onto their desktop or other preferred device and finish the conversion process.

Another site which I think handles the customer journey optimization well is Cracker Barrel.


Cracker Barrel home page design


Cracker Barrel home page design (Source: Cracker Barrel) (Large preview)

Cracker Barrel doesn’t overdo it when it comes to designing for the holidays. Instead, it’s developed a series of calls-to-action that set certain types of visitors on the right path.

The first one features an image of what looks like a holiday feast with the CTA “Order Heat N’ Serve”. That’s brilliant. If people are taking the time to visit this site right before Thanksgiving, it’s probably to see if they can get help preparing their major feast… which it appears they can.

The second section sort of looks festive, though I’d still say they play it safe with choice of color, texture and gift card image. With a CTA of “Buy Gift Cards”, they’re now appealing to holiday shoppers. Not only can you get a whole feast conveniently prepared by Cracker Barrel, but you can buy gifts here, too.

Sometimes designing for the holidays isn’t about the blatant use of snowflake imagery or promoting recipes for cooking a turkey. Sometimes it’s about understanding what your users’ particular needs are at that time and helping setting them on that exact journey right away.

Wrap-Up

I understand that there are ways to add a dancing Santa to a site or to spruce up pop-ups with animated text and images, but I think subtler is better.

It’s kind of like the whole holiday music and decorations thing. How many times have you gone to your local drug store at the end of October for the purposes of getting Halloween candy, only to be met by an entire aisle full of holiday decorations? Or maybe you entered a department store like Macy’s in November, thinking you’ll beat the crazy holiday crowds. And, yet, holiday music is already playing. It’s overkill.

If you want to impress mobile visitors with your website around the holidays, focus on making this a worthwhile experience. Optimize your server for high volumes of traffic, put extra security in place, reorganize the navigation and add some small festive touches to your design that call attention to the most relevant parts of your site at this time of year.

Smashing Editorial
(ra, yk, il)


Excerpt from: 

Get Your Mobile Site Ready For The 2018 Holiday Season

Thumbnail

Our top 7 blog posts of 2017

Build the most effective personalization strategy: A 4-step roadmap Along with “artificial intelligence”, “personalization” has been a hot topic among…Read blog postabout:Our top 7 blog posts of 2017

The post Our top 7 blog posts of 2017 appeared first on WiderFunnel Conversion Optimization.

Continued here – 

Our top 7 blog posts of 2017

How to use pricing psychology to motivate your shoppers: Two test results just in time for the Holidays

Black Friday, Cyber Monday, holiday sales, and post-Christmas blow-outs: We’re in the middle of the biggest buying season of the…Read blog postabout:How to use pricing psychology to motivate your shoppers: Two test results just in time for the Holidays

The post How to use pricing psychology to motivate your shoppers: Two test results just in time for the Holidays appeared first on WiderFunnel Conversion Optimization.

Source: 

How to use pricing psychology to motivate your shoppers: Two test results just in time for the Holidays

Get a Jump-Start on 2017 with These Free Webinars

If you’re like me, your inbox is a mix of professional emails sprinkled with a dash of webinars and a touch of ebooks.

Sometimes, I’ll open one of these hyper-actionable and insightful emails, but no matter how hard I try, I can’t follow through (despite my good intentions).

The truth is, even if I carve out time during the day, I focus on what needs to be accomplished now, and often that doesn’t include improving my marketing skills for the future.

There, I said it.

Now that I’ve revealed the truth, I have to admit that operating this way will only get me so far.

Which is why this holiday season, I’m taking advantage of some much-needed free time to level up my conversion marketing skills. And you can too! 

We’ve handpicked some of our most actionable webinars, filled with expert advice that will not only help you increase your conversions, but also get you on track to becoming the marketer you want to be in 2017.

So instead of spending the holidays eating yourself into a peppermint bark-induced coma, brush up on the skills that will make the most impact in 2017. (Or do both — we vote for both.)

Link: 

Get a Jump-Start on 2017 with These Free Webinars

Thumbnail

Tech Advent Calendars For Web Designers And Developers In 2016

With the holidays almost here and the new year already in sight, December is a time to slow down, an occasion to reflect and plan ahead. To help us escape the everyday hectic for a bit and sweeten our days with a delightful little surprise each day up to Christmas, the web community has assembled some fantastic advent calendars this year. They cater for a daily dose of web design and development goodness with stellar articles, inspiring experiments, and even puzzles to solve.

Link:

Tech Advent Calendars For Web Designers And Developers In 2016

Winter- And Holiday-Inspired Icon Sets [Christmas Freebies]

Christmas is just around the corner, and what better way to celebrate than with some free goodies? We sifted through the web (and our archives) to find holiday-themed icon sets for you that’ll give your creative projects some holiday flair. Perfect for Christmas cards, gift tags, last-minute wrapping paper, or whatever else you can think of.
All icons can be downloaded for free, but please consult their licenses or contact the creators before using them in commercial projects.

Link:  

Winter- And Holiday-Inspired Icon Sets [Christmas Freebies]

What You Should Do Right Now to Avoid Stressing Out for the Holiday E-commerce Explosion

santa chllin

Every year it feels like TV and radio stations, retailers and other businesses start the “holiday season” talk earlier and earlier. Some people complain. Some people love it. I’m usually thinking about other things — like how to stay sane. You see, online retailers (which many of my clients are) are basically going berserk during the months of November and December. Ever heard of Black Friday? Cyber Monday? E-commerce booms as the holidays near, especially among women and Millennials. Taking advantage of these search trends takes preparation, grit, timing, and even a little bit of luck. I’m not promising an…

The post What You Should Do Right Now to Avoid Stressing Out for the Holiday E-commerce Explosion appeared first on The Daily Egg.

Excerpt from – 

What You Should Do Right Now to Avoid Stressing Out for the Holiday E-commerce Explosion

10 Free Marketing Ebooks That Will Make You a Better Marketer in 2016

The holidays are a time for decompressing, spending time with loved ones and overeating. But they’re also a time to clear your mind and make way for new resolutions and new beginnings.

So this holiday season, why not curl up by the fire with your e-reader and take in one of the actionable marketing ebooks released this year?

Phone and ebook
Is roasting chestnuts even a thing anymore? Curl up by the fire with an actionable marketing ebook. Image via kaboompics.com.

These actionable gems may not be totally free, but we think they’re more than worth trading your email for.

So sit back, pour yourself some eggnog, release your not-so-inner-nerd — and prepare to rock your marketing in the new year.

1. 25 Actionable Social Media Strategies You Can Implement Today by Buffer

Buffer social media strategies ebook cover

If you want to learn more about social media, why not look to the very people who do it to pay the bills? The Buffer team has compiled a list of social media strategies you can implement today to tackle social platforms like Pinterest, Twitter and Facebook.

What to expect:

  • Tactics for keeping your evergreen content alive on social platforms
  • Tips for catering your messaging to each unique social media platform
  • Testing ideas for the placement of social share buttons on your website

2. Social Media Data Cookbook by Hootsuite

Hootsuite ebook cover image

Social media marketers know the importance of collecting data, but knowing where to start can be tricky. The social media management system Hootsuite has put together some helpful recipes that don’t require an entire team of data scientists to implement.

What to expect:

  • Tips on how to make the most of the social media data that you already have
  • Step-by-step instructions for determining the ROI of your social media campaigns
  • A whole lot of additional resources and videos for social media marketers who like to go deep

3. Data-Driven Content Marketing by Uberflip

data-driven-content-marketing

Marketers are expected to keep tabs on how their content is performing, but they’re also expected to use that data to inform future content strategy.  If you’re not already doing this, don’t sweat it! This ebook by Uberflip, the content management tool, teaches how to craft an effective content strategy that uses data as its backbone.

What to expect:

  • A comprehensive guide to crafting a content strategy with data at its core
  • Tips on how to measure the effectiveness of your content distribution
  • Step-by-step instructions on how you can use data from your previous campaigns to inspire future content marketing efforts

4. The Performance Marketer’s Guide to Retargeting by Adroll

Adroll ebook cover image

You may have seen those pesky ads following you around Facebook — they’re taunting you with that sweater you’ve been dreaming about or those shoes you were Googling last night. Retargeting has become a necessary part of performance marketing and is essential to many paid acquisition strategies. There’s more to retargeting than meets the eye, and advertising retargeting giant Adroll has broken it down for you.

What to expect:

  • An overview of the basics of retargeting
  • Retargeting strategies for web, social and mobile
  • Tips on how to measure your ads’ performance
  • Case studies, checklists and optimization tips galore

5. The Beginner’s Guide to SEO by Moz

Moz ebook on SEO cover image

SEO isn’t just for performance marketers. It’s a topic that marketers of all stripes need to know about — from content marketers to social media marketers to copywriters and beyond. If you feel like you could use a refresher, check out this beginner’s guide by analytics experts Moz, which covers the history of SEO along with recent changes and developments.

What to expect:

  • An overview of how search engine optimization and search engine marketing work
  • A breakdown of the importance of keywords, title tags, URL structure and other factors that influence SEO
  • Keyword research basics and pointers for measuring your success
  • A series of SEO myths, debunked

6. The Optimization Survival Guide by Optimizely

Optimizely ebook cover image

Whether you’re new to conversion rate optimization (CRO) or a seasoned pro, it’s never too late to build these strategies into your marketing practice. This guide from Optimizely the website optimization platform, is meant to inspire you to “always be testing” — by standing on the shoulders of giants (to the tune of 30+ heavyweight CRO experts).

What to expect:

  • Inspiration and best practices for A/B testing
  • Advice and insights from 30+ industry professionals
  • Strategies on how to overcome roadblocks that are keeping you from A/B testing (and growing your bottom line)

7. The Conversion Marketer’s Guide to Landing Page Copywriting by Unbounce

Unbounce ebook cover image

Marketing campaigns of all flavors depend on strong copywriting to help them succeed — especially when it comes to landing pages. Is your copy converting visitors into customers or is it falling flat? In this ebook, Joanna Wiebe shares her secret recipe to copywriting success.

What to expect:

  • Insights and tips from some of the world’s most successful conversion copywriters
  • Step-by-step copywriting tips for all landing page elements
  • Shortcuts for writing click-worthy calls to action
  • Landing page examples and critiques to illustrate the above

8. The Optimization Benchmark, Q2 2015 by Optimizely

Optimizely Benchmark ebook cover image

What better way to improve your conversion rate optimization strategy for next year than to look back on what has worked for others in 2015? In this report, Optimizely shows you how your organization stacks up against industry standards in a variety of areas: from A/B testing frequency to resources allocated.

What to expect:

  • A rundown of why optimization is essential for growth
  • A glimpse at how successful conversion rate optimizers build their teams
  • Insight into how others are managing and streamlining their experimentation

9. Conversations, Not Campaigns by Marketo

Marketo ebook cover image

Email is still the most direct way to contact your customers or clients, but with open rates plummeting, it can fall flat if you’re not doing it right. As Marketo, the marketing automation software company,  explains in this ebook about the finer points of customer engagement, the most effective way to drive sales is having real conversations.

What to expect:

  • Case studies that illustrate what engaging conversations look like
  • Tricks for scaling one-on-one conversations
  • Email automation explainers and examples

10. Attention-Driven Design: 23 Visual Principles For Designing More Persuasive Landing Pages by Unbounce

Unbounce ebook Attention-Drive Design cover image]

So you’ve built a landing page, now what? If you need help trying to make your landing page, convert we’ve got the solution for you. Written by our very own Oli Gardner (Yes we’re totally plugging ourselves) this ebook comes with 60 pages of crucial explanations of every element that make up attention-driven design and will help your landing page drive more conversions.

Ever have a sneaking suspicion that your landing page could be converting better? Well, you’re probably right — and you can get closer to perfection by employing the principles of attention-driven design, broken down by Unbounce’s Oli Gardner in this ebook.

What to expect:

  • An overview of all 23 visual principles, with useful case studies and examples
  • Psychology and interaction design theory and tips
  • Pointers for designing pages with perfect attention ratio (plus a definition of what attention ratio is, exactly, and why you should give a hoot)

Get ready for the new year

We’ve picked marketing ebooks that touch on everything from content marketing to performance marketing to A/B testing (and everything in between). They cover the full spectrum of marketing and are packed with the tools you need to become the full-stack marketer you resolved to be in 2016.

Did we mention they’re all easily downloadable and perfect for traveling (or for cozying up with on your couch)?

Let us know if we missed any amazing ebooks you think should have been featured by sharing them in the comments below. Happy reading!

Link to original:

10 Free Marketing Ebooks That Will Make You a Better Marketer in 2016

Thumbnail

Freebie: Swifticons Icon Set (92×3 Icons, AI, Sketch, PNG, SVG, EPS, PDF)

A good freebie is always good to have. Today, we’re happy to release a quite unique icon set. The goodie contains 92 icons in three editable variants: outlined, filled & colored, covering 15 wide categories: Science, Medical, Tech, Kitchen, Activities, Care, Weather, Marketing, Transport, Holidays, Formats, Interface, Interaction, Photo, Brands. [Links checked February/19/2017]
Using a precise grid of 60px to guarantee sharpness and consistency, unlimited possibilities are unlocked when your creativity applies to this awesome set.

Source:  

Freebie: Swifticons Icon Set (92×3 Icons, AI, Sketch, PNG, SVG, EPS, PDF)

Thumbnail

Designing For Print With CSS

If you mention printing with CSS to many people who work on the web, print style sheets1 are the use that comes to mind. We are all well used to creating a style sheet that is called upon when a web document is printed. These style sheets ensure that the print version is legible and that we don’t cause a user to print out huge images. However, CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all.

In this article, we’ll take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. I’ll explain how the selectors, properties and values that they introduce work. I’ll finish up with a working example that you can use as a starting point for your own experiments. For that example, we’ll need a user agent that supports this specialized CSS. I’ll be using Prince, which is a commercial product. However, Prince has a free version that can be used for non-commercial use, making it a good tool to try out these examples.

Why HTML And CSS Make Sense For Print

It may seem a bit strange that content not particularly destined for the web should be maintained as HTML and formatted with CSS. It seems less strange when you realize that popular eReader formats such as EPUB and MOBI are HTML and CSS under the hood. In addition, even if the entirety of a manuscript or catalog isn’t to be published on a website, some of it likely will be. HTML becomes a handy format to standardize on, far easier to deal with than having everything in a Word document or a traditional desktop publishing package.

The Differences Between CSS For The Web And CSS For Print

The biggest difference, and conceptual shift, is that printed documents refer to a page model that is of a fixed size. Whereas on the web we are constantly reminded that we have no idea of the size of the viewport, in print the fixed size of each page has a bearing on everything that we do. Due to this fixed page size, we have to consider our document as a collection of pages, paged media, rather than the continuous media that is a web page.

Paged media introduces concepts that make no sense on the web. For example, you need to be able to generate page numbers, put chapter titles in margins, break content appropriately in order that figures don’t become disassociated from their captions. You might need to create cross-references and footnotes, indexes and tables of content from your document. You could import the document into a desktop publishing package and create all of this by hand, however, the work would then need redoing the next time you update the copy. This is where CSS comes in, whose specifications are designed for use in creating paged media.

Because the specifications are designed for paged media, we won’t be considering browser support in this article — it wouldn’t make a lot of sense. Later on, we’ll look at a user agent designed to turn your HTML and CSS into a PDF using these specifications.

The Specifications

Much of the CSS you already know will be useful for formatting for print. Specifically for print, we have the “CSS Paged Media Module2” and the “CSS Generated Content for Paged Media Module293” specifications. Let’s look at how these work.

The @page Rule

The @page rule lets you specify various aspects of a page box. For example, you will want to specify the dimensions of your pages. The rule below specifies a default page size of 5.5 by 8.5 inches. If you intend to print a book, perhaps by a print-on-demand service, then finding out the sizes you can use is important.

@page 
  size: 5.5in 8.5in;

In addition to specifying sizes with length values, you may also use paper size keywords, such as “A4″ or “legal.”

@page 
  size: A4;

You may also use a keyword to specify the page’s orientation — “portrait” or “landscape.”

@page 
  size: A4 landscape;

Understanding the Page Model

Before going any further, we should understand how the page model for paged media works, because it behaves somewhat differently to how things work on screen.

The page model defines a page area and then 16 surrounding margin boxes4. You can control the size of the page area and the size of the margin between the edge of the page area and the end of the page itself. The table in the specification explains very well how these boxes are sized.

1-image-margin-boxes-opt5
(See large version6)

The page area is the space on the page into which your page’s content will flow. When it runs out of room, another page will be created. The margin boxes are used only for CSS-generated content.

Left and Right Page Spreads

Another aspect of the page model is that it defines pseudo-class selectors for the left and right pages of your document. If you look at any printed book you have on hand, you’ll probably see that the margin’s size and the margin’s content are different on the left and right pages.

We can use these selectors to define different margin sizes for our pages.

@page :left 
  margin-left: 3cm;


@page :right 
  margin-left: 4cm;

Two other pseudo-class selectors are defined. The :first selector targets the first page of a document.

@page :first 


The :blank pseudo-class selector targets any page that is “intentionally left blank.” To add this text, we can use generated content that targets the top-center margin box.

@page :blank 
  @top-center  content: "This page is intentionally left blank." 
}

Generated Content and Paged Media

In the last example, we used CSS-generated content to add the text to the top-center margin box. As you will discover, generated content is vitally important to creating our book. It’s the only way things can be added to our margin boxes at all. For example, if we want to add the title of the book to the bottom-left margin box of right-hand pages, we would do this using generated content.

@page:right 
  @bottom-left 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "My book";
    font-size: 9pt;
    color: #333;
  
}

Page Breaks

Also part of the “Paged Media” specification is information about how to control page breaks. As already described, once the content fills a page area, it will move onto a new page. If a heading has just been written to the page, you might end up with a page that finishes with a heading, with the related content beginning on the next page. In a printed book, you would try to avoid this situation. Other places you might want to avoid a break are in the middle of a table and between a figure and its caption.

Starting a new chapter of a book with an h1 heading is common. To force this heading to always be the beginning of a page, set page-break-before to always.

h1 
  page-break-before: always;

To avoid breaks directly after a heading, use page-break-after.

h1, h2, h3, h4, h5 
  page-break-after: avoid;

To avoid breaking figures and tables, use the page-break-inside property.

table, figure 
  page-break-inside: avoid;

Counters

Books are all about numbering things — pages, chapters, even figures. We can actually add these numbers via CSS, saving us from having to renumber everything because we decided to, say, add a new figure partway through a chapter. We do this using CSS counters7.

The obvious place to start is with page numbers. CSS gives us a predefined page counter; it starts at 1 and increments with every new page. In your style sheet, you would use this counter as the value of generated content, to put the page counter in one of your margin boxes. In the example below, we are adding page numbers to the bottom-right of right-hand pages and the bottom-left of left-hand pages.

@page:right
  @bottom-right 
    content: counter(page);
  
}

@page:left
  @bottom-left 
    content: counter(page);
  
}

We’ve also created a counter named pages. This counter will always be the total number of pages in your document. If you want to output “Page 3 of 120,” you can.

@page:left
  @bottom-left 
    content: "Page " counter(page) " of " counter(pages);
  
}

You can create your own named counters and increment and reset them as you require. To create a counter, use the counter-reset property, increment it with counter-increment. The CSS rules below will create a counter for chapters named chapternum and increment it with each h1 — being the start of a chapter in this book. We then use the value of that counter in generated content to add the chapter number and a period before the chapter’s actual title.

body 
  counter-reset: chapternum;


h1.chapter:before 
  counter-increment: chapternum;
  content: counter(chapternum) ". ";

We can do the same for figures in the book. A common way to number figures is to use chapternum.figurenum. So, “Figure 3-2″ would be the second figure in chapter 3. On the h1, we could reset figurenum in order that it starts from 1 for each chapter.

body 
  counter-reset: chapternum figurenum;


h1 
  counter-reset: figurenum;


h1.title:before 
  counter-increment: chapternum;
  content: counter(chapternum) ". ";


figcaption:before 
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";

Setting Strings

Take a look at a printed book again. As you leaf through a chapter, you’ll probably see that the chapter’s title is printed on the left or right page. As strange as it may sound, the “Generated Content for Paged Media” specification lets us achieve this using CSS.

We do this using a property named string-set in the selector that we want to take the content from. For the chapter title, this would be the h1. The value of string-set is the name you would like to give this content and then content(). You can then output this as generated content using string().

h1  
  string-set: doctitle content(); 


@page :right 
  @top-right 
    content: string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 8pt;
  
}

When your paged media is generated, each time an h1 occurs, the content is written to doctitle and then outputted in the top-right margin box of right-hand pages, changing only when another h1 occurs.

Footnotes

Footnotes are a part of the “CSS Generated Content for Paged Media Module8” specification. The way footnotes work is that you would add the text of your footnote inline, wrapped in HTML tags (probably a span), with a class to identify it as a footnote. When the page is generated, the content of that “footnote element” is removed and turned into a footnote.

In your CSS, use the footnote value of the float property to create a rule for your footnote class.

.fn 
  float: footnote;

In your document, use that class to wrap any footnote text.

<p>Footnotes<span class="footnotes">Footnotes and notes placed in the footer of a document to reference the text. The footnote will be removed from the flow when the page is created.</span> are useful in books and printed documents.</p>

Footnotes have a predefined counter that behaves in the same way as the page counter. Typically, you will want to increment the counter by 1 each time a fn class occurs and reset it at the beginning of each chapter.

.fn 
  counter-increment: footnote;


h1 
  counter-reset: footnote;

The various parts of a footnote can be targeted with CSS pseudo-elements. The footnote-call is the numeric anchor in the text that indicates there is a footnote. This uses the value of the footnote counter as generated content.

.fn::footnote-call 
  content: counter(footnote);
  font-size: 9pt;
  vertical-align: super;
  line-height: none;

The footnote-marker is the numeric marker placed in front of the footnote text in the footer of your document. These behave in a similar way to the numbers generated for an ordered list in CSS.

.fn::footnote-marker 
  font-weight: bold;

The footnotes themselves are placed in the margin, within a special area of the page named @footnotes. You would target and style that area as follows.

@page 
  @footnotes 
    border-top: 1pt solid black;
  
}

Cross-References

Before moving on to a working example of everything we’ve learned, let’s look at cross-references. On the web, we cross-reference things by adding links. In a book or other printed document, you would normally refer to the page number where that reference is to be found. Because page numbers might change according to the format that the book is printed in — and between editions — doing this with CSS saves us from having to go through and change all of the numbers.

We use another new property, target-counter, to add these numbers. Start by creating links in your document, giving them an href, which is the ID of the element in the document that you want to target. Also, add a class to identify them as a cross-reference, rather than an external link; I’m using xref.

<a class="xref" href="#ch1" title="Chapter 1">Chapter 1</a>

Then, after the link, use generated content again to output (page x), where x is the number of the location in the book where that ID can be found.

a.xref:after 
  content: " (page " target-counter(attr(href, url), page) ")";

We’ll be looking at this technique in practice when we create a table of contents for the working example.

Putting It All Together: An Example Book

We’ve looked at a lot of different properties here in isolation. They make more sense once you put them to use by building a book.

To actually create a book using this CSS, you’ll need a user agent that supports it. Currently, very few things implement this specification well; the one that is most accessible is Prince129. A standalone commercial license for Prince is expensive, however, you may use Prince free of charge for non-commercial projects. This means that if you just want to try out these techniques, you can. Additionally, if you do have non-commercial uses for this technology, you may use Prince to format those books.

I have extracted passages from one of my favorite books on Project Gutenberg, Our Cats by Harrison Weir10. I’ve chosen this book because I like cats and because it has images and footnotes that I can use to demonstrate formatting.

You can find the files I am using, plus a generated PDF, over on GitHub11. If you want to experiment with the CSS and build the book yourself, then you will need to download and install Prince129. Prince is a command-line tool on the Mac, and although there is a Windows GUI, I’ll use the command line because it really is very simple.

Using a Terminal window, switch to your book’s directory or the location where you downloaded my files from GitHub.

cd /Users/username/smashing-css-books

Now, run Prince:

prince -s pdf-styles.css book.html builds/book.pdf

This will create a PDF in the builds folder named book.pdf. Now, if you make any changes to the CSS or HTML, you can run Prince to see what is different.

The HTML Document

My entire “book” is compiled in a single HTML document. Compiling documents in Prince is possible, but I’ve found it simpler to just deal with one large document. Before the chapters, which start with an h1, I have a div that contains the cover image, and then the table of contents for the book.

The table of contents links to the IDs of the chapters’ h1 headings.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
  <head>
  <meta charset="utf-8" />
  <title>Our Cats and All About Them</title>
  <meta name="author" content="Harrison Weir"/>
  <meta name="subject" content="Cats. Their Varieties, Habits and Management; and for show, the Standard of Excellence and Beauty"/>
  <meta name="keywords" content="cats,feline"/>
  <meta name="date" content="2014-12-05"/>
  </head>
  <body>
    <div class="frontcover">
    </div>
    <div class="contents">
      <h1>Extracts from Our Cats and All About Them by Harrison Weir</h1>

        <ul class="toc">
          <li><a href="#ch1">The First Cat Show</a></li>
          <li><a href="#ch2">Trained Cats</a></li>
          <li><a href="#ch3">General Management</a></li>
          <li><a href="#ch4">Superstition and Witchcraft</a></li>
        </ul>

    </div>

    <h1 id="ch1" class="chapter">The First Cat Show</h1>
      <p>… </p>

    <h1 id="ch2" class="chapter">Trained Cats</h1>
      <p>… </p>

    <h1 id="ch3" class="chapter">General Management</h1>
      <p>… </p>

    <h1 id="ch4" class="chapter">Superstition and Witchcraft</h1>
      <p>… </p>

  </body>
</html>

The CSS then uses all of the things we have described so far. To start, we need to set up a size for the book using the @page rule. We then use the :first pseudo-class selector to remove the margin on page 1, because this page will have the cover image.

@page 
  size: 5.5in 8.5in;  
  margin: 70pt 60pt 70pt;


@page:first 
  size: 5.5in 8.5in;  
  margin: 0;

We then deal with the image for the front cover, making sure that it covers the whole page area.

div.frontcover  
  page: cover; 
  content: url("images/cover.png");
  width: 100%;
  height: 100%; 

2-image-cover-opt13
(See large version14)

Next, we deal with the specifics of the left- and right-hand pages, using the :right and :left spread pseudo-classes.

The right-hand spread will have the title of the book in the bottom-left margin box, a page counter in the bottom-right, and the chapter’s title in the top-right. The chapter’s title is set using string-set further down in the style sheet.

@page:right 
  @bottom-left 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  

  @bottom-right  
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  

  @top-right 
    content:  string(doctitle);
    margin: 30pt 0 10pt 0;
    font-size: 9pt;
    color: #333;
  
}
3-image-spread-right-opt15
(See large version16)

The left-hand spread has the book’s title in the bottom-right and the page counter in the bottom-left.

@page:left 
  @bottom-right 
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: "Our Cats";
    font-size: 9pt;
    color: #333;
  

  @bottom-left  
    margin: 10pt 0 30pt 0;
    border-top: .25pt solid #666;
    content: counter(page);
    font-size: 9pt;
  
}
4-image-spread-left-opt17
(See large version18)

For the first page, which contains the cover image, we’ll make sure that no generated content appears by setting it to normal.

@page:first 
  @bottom-right 
    content: normal;
    margin: 0;
  

  @bottom-left 
    content: normal;
    margin: 0;
  
}

The next section of the style sheet deals with counters. In addition to the preset page counter, we are defining counters for chapters and figures.

/* Reset chapter and figure counters on the body */
body 
  counter-reset: chapternum figurenum;
  font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
  line-height: 1.5;
  font-size: 11pt;


/* Get the title of the current chapter, which will be the content of the h1.
Reset figure counter because figures start from 1 in each chapter. */
h1 
  string-set: doctitle content();
  page-break-before: always;
  counter-reset: figurenum;
  counter-reset: footnote;
  line-height: 1.3;


/* Increment chapter counter */
h1.chapter:before 
  counter-increment: chapternum;
  content: counter(chapternum) ". ";


/* Increment and display figure counter */
figcaption:before 
  counter-increment: figurenum;
  content: counter(chapternum) "-" counter(figurenum) ". ";

Chapters now have their number placed before the title. Figures also display their number.

5-image-figure-number-opt19
(See large version20)

We create footnotes as in the explanation earlier, superscripting the footnote’s call.

.fn 
  float: footnote;


.fn 
  counter-increment: footnote;


.fn::footnote-call 
  content: counter(footnote);
  font-size: 9pt;
  vertical-align: super;
  line-height: none;


.fn::footnote-marker 
  font-weight: bold;


@page 
  @footnotes 
    border-top: 0.6pt solid black;
    padding-top: 8pt;
  
}
6-image-footnotes-opt21
(See large version22)

We then add some rules to control where pages break. You need to be fairly careful about being too heavy handed with this. If your book has a lot of tables and figures, then adding many specific rules here could cause a lot of long gaps in the book. Experimenting and testing will show how far you can take the control of breaks. I have found the rules below to be a good starting point.

Remember that this is a suggestion to the user agent. In some cases, keeping a table from breaking will be impossible if the table doesn’t fit on a page!

h1, h2, h3, h4, h5 
  font-weight: bold;
  page-break-after: avoid;
  page-break-inside:avoid;


h1+p, h2+p, h3+p 
  page-break-before: avoid;


table, figure 
  page-break-inside: avoid;

Finally, we style the table of contents, and we use an interesting trick here. When describing cross-references, I explained how we use target-counter to display the page number that the ID is on. This is what we’ll do for our table of contents. The rule below puts the page number after the link to each chapter in the table of contents.

ul.toc a::after 
  content: target-counter(attr(href), page);

7-image-toc-numbers-opt23
(See large version24)

Commonly in books, however, you would use leader dots to line up all of the page numbers against the right margin. Amazingly, CSS gives us a way to do this, by adding leader() before the number in the generated content.

ul.toc a::after 
  content: leader('.') target-counter(attr(href), page);

8-image-toc-leader-opt25
(See large version26)

We now have a complete style sheet with which to build our book. I’ve avoided spending a lot of time on typography here, concentrating instead on the specifics of creating a book. From this point, however, you can experiment and add your own styles to create a unique book design.

Not Just Books!

Remember that these techniques are not just for books. You could use them to generate print and PDF versions of a product catalog directly from the HTML of a website that you have developed for a client. Or you could create flyers and brochures from web content.

If you want to create PDF documents from a website using Prince, then DocRaptor27 is a great option. This service uses Prince via an API. You can send documents via the API and receive a PDF — perfect for allowing users to download content as a PDF on the fly. Everything we have looked at in this article is possible via an API integration with DocRaptor.

Even if you don’t have an immediate need for PDF generation, it’s a fascinating aspect of CSS — and it’s a useful skill to have tucked away, so that you know what is possible when a use case presents itself.

Resources And Further Reading

(vf, al, il)

Footnotes

  1. 1 http://www.smashingmagazine.com/2013/03/08/tips-and-tricks-for-print-style-sheets/
  2. 2 http://www.w3.org/TR/css3-page/
  3. 3 http://www.w3.org/TR/css-gcpm-3/
  4. 4 http://www.w3.org/TR/css3-page/#margin-boxes
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/12/1-image-margin-boxes-large-opt.jpg
  7. 7 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
  8. 8 http://www.w3.org/TR/css-gcpm-3/#footnotes
  9. 9 http://princexml.com
  10. 10 http://www.gutenberg.org/ebooks/35450
  11. 11 https://github.com/rachelandrew/css-for-print
  12. 12 http://princexml.com
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2014/12/2-image-cover-large-opt.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2014/12/2-image-cover-large-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2014/12/3-image-spread-right-large-opt.jpg
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2014/12/3-image-spread-right-large-opt.jpg
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2014/12/4-image-spread-left-large-opt.jpg
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2014/12/4-image-spread-left-large-opt.jpg
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2014/12/5-image-figure-number-large-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2014/12/5-image-figure-number-large-opt.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2014/12/6-image-footnotes-large-opt.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2014/12/6-image-footnotes-large-opt.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2014/12/7-image-toc-numbers-large-opt.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2014/12/7-image-toc-numbers-large-opt.jpg
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2014/12/8-image-toc-leader-large-opt.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2014/12/8-image-toc-leader-large-opt.jpg
  27. 27 https://docraptor.com/
  28. 28 http://www.w3.org/TR/css3-page/
  29. 29 http://www.w3.org/TR/css-gcpm-3/
  30. 30 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters
  31. 31 https://books.spec.whatwg.org/
  32. 32 http://www.princexml.com/doc/
  33. 33 http://24ways.org/2013/how-to-write-a-book/
  34. 34 http://alistapart.com/article/building-books-with-css3
  35. 35 http://alistapart.com/article/boom
  36. 36 http://rachelandrew.co.uk/archives/2014/01/07/html-epub-mobi-pdf-wtf-creating-an-ebook/

The post Designing For Print With CSS appeared first on Smashing Magazine.

Read the article:  

Designing For Print With CSS