B2B products and services can be difficult to fully capture on a landing page—we know from experience.
Whether it’s defining your conversion goal, ordering your page sections, or writing copy that resonates, it’s not always a walk in the park. Not to mention B2B can involve so many more decision makers you may need to appeal to. Showcasing the value of something like software at scale can be trickier than explaining how your cutting-edge hoverboard might benefit just one person.
But, in our view, building a successful B2B page boils down to a few key things:
Creating an engaging experience that makes prospects acutely aware of the problem you solve
Promoting your offer clearly and simply, and
Cleverly leading visitors through consideration, towards conversion.
Persuasion sounds great in theory, hey, but what does this actually involve?
To help you better understand what makes an effective B2B landing page, we’ve analyzed six Unbounce-built pages doing a great job. Scroll through the examples to see what they do especially well, and how you can take their techniques to the next level.
1. PIM on Cloud
Image courtesy of PIM on Cloud. (Click image to see the full page.)
Best practice to steal: Where appropriate, bring prospects through several stages of the customer journey.
Sales cycles vary per industry, sure, but the process always starts with building interest and (ideally) ends with a purchase decision. Designed properly, some landing pages can take readers through each of these stages as they scroll from top to bottom. We found PIM on Cloud’s long-form landing page does this really well.
This brand builds awareness by offering a description of their service (in the first two page sections), they guide prospects through consideration with a list of features and benefits, and then drive conversions by detailing available plans alongside their calls to action (i.e. “Choose plan” or “Ask for pricing”, respectively).
Though some landing pages are designed to increase conversions at the bottom of the funnel, providing a more holistic journey—like PIM on Cloud does—allows a wider net for prospects to learn more. This page could even be a destination URL for many of PIM’s branded Google Ads because it’s so high-level.
Of course, some visitors will also know exactly what they’re looking for from the start, so PIM on Cloud includes anchor navigation on this page for a choose-your-adventure experience. Thanks to this, more qualified prospects can jump straight to the details most relevant to them. While landing pages shouldn’t have tons of links on them (your main site navigation would be a real no-no, for example), anchor navigation is recommended if you’re trying to cover a lot of info at once. They can make longer pages like this more digestible.
Bonus: PIM on Cloud’s landing page provides readers with an FAQ section and a contact form, further opportunity for prospects to evaluate their decision—and for the brand to collect valuable leads. When you make landing pages that cover a broad offer, be sure to consider whether you might use an FAQ to ease any potential friction, and leave a way people can get in touch with you directly just in case.
2. Resource Guru
Image courtesy of Resource Guru. (Click image to see the full page.)
Best practice to steal: Help prospects visualize a complex idea.
Many B2B products and services solve complex problems. As a result, landing pages need to be designed in such a way that they make it easy for potential customers to understand features and benefits. One way to do this is to incorporate visual elements like videos, images, and even animations—all of which can help drive conversions. According to Eyeview, using a video on your landing page can increase conversions by up to 80%.
Resource Guru’s landing page is effective because it greets viewers with a large play button as soon as they land. Pressing play is intuitive and launches a high-quality explainer video. They let this video do the talking, then quickly request an action from visitors.
Taking it to the next level:
Instead of a simple play button, this landing page could have benefitted from including a video thumbnail featuring people’s faces. Visually compelling thumbnails that align with your video’s content can actually increase play rate.
Additionally, it’s always a good idea to reiterate all the core points from your video script on your landing page in text. This ensures that even in the event you have a low play rate, prospects can still learn about your offer without having to click play. Whether they left their headphones at home that day or prefer text, it’s good to have a backup plan.
Image courtesy of Blink. (Click image to see the full page.)
Best practice to steal: Include the right kind of proof to build trust and credibility.
Blink’s landing page above relies heavily on testimonials and a list of select, high-profile clients, which are presented immediately below their contact form. Also, rather than diving into product features, Blink backs up their expertise by showcasing industry awards.
Taking it to the next level:
Although testimonials, logos, and other social proof are effective, it’s worth noting that Blink misses the opportunity to (immediately) explain what they actually do for customers at the start of this page.
The digital asset management company applies the rule of three when presenting their key benefits and testimonials. This clear, concise, and easy-to-consume structure is also key to the landing page’s successful layout: it introduces the product, backs up their claims with stats, and provides an easy way for prospects to request a demo. The easier visitors can consume and retain the content on your landing page, the better equipped they are to make a decision to purchase. They’re also more likely to keep scrolling instead of being overwhelmed by too much info.
Taking it to the next level:
Headline clarity is key, and you only have the first few words of anything to convince people to keep reading. In my opinion, MediaValet could have benefited from using a variation of their sub-headline (“Organize your assets, marketing content and media in one central location with digital asset management.”) as their primary headline to make their product offer that much more obvious.
5. Vivonet Kiosk
Image courtesy of Vivonet Kiosk. (Click image to see full page.)
Best practice to steal: A floating CTA button gives you a greater chance to convert.
A landing page has one goal—to convince visitors to take action. Whatever the intended next step, it’s your job to create a clear, strategically placed call to action that lets visitors know what to do next. Using multiple CTAs can be distracting to your audience, but a consistent CTA that follows visitors throughout their experience? That’s crystal clear.
Vivonet Kiosk uses a floating CTA button that follows visitors as they scroll down the page. No matter where they’re at, the “Talk to Us About Kiosks” button remains in the bottom right-hand corner of their screen.
Best practice to steal: Have a conversation with your prospects.
Alright, y’got me. I’m using an Unbounce example here, but I think you’ll agree it’s pretty good. This is a landing page we created to speak about a problem we solve, and drive signups.
In the screenshot you may notice that this page actually breaks one of the rules we established above: it includes the main site navigation. Think of this as a hybrid, as well as a great example of how flexible you can be. Our page is structured with the persuasive force of a landing page (and built using our builder)—but incorporates neatly into the rest of our site, living on our domain and sharing the site’s nav. We do this fairly often when we want to build a web page especially quickly for the site that would otherwise require a ton of dev work.
Since Unbounce markets to marketers, we also wanted to overcome the hardened shell of skepticism that so many of us develop when it comes to other people’s campaigns. So this landing page uses a conversational framework to build trust. It offers a straightforward rundown of both the problem—running ads has become increasingly pricey—and the solution before it ever pitches our platform. And the inclusion of a chatbot invites you to ask questions we don’t cover, keeping the conversation going.
Of course, a landing page with an educational tone risks losing the reader’s attention—the same way a boring teacher might. In addition to a friendlier tone, we use interactive elements, animations, and social proof in the form of quotes from digital marketers. All of these elements keep things lively and provide added detail.
Like the example from PIM on Cloud, we also anticipated less qualified prospects might visit the page, so we include tabs and collapsible page sections that provide more info or answer questions. If a reader happens to hit the page without a strong understanding of what we mean by “landing page,” for instance, they can click to learn the answer, without leaving. Like any good conversationalist, we listen as well as talk.
Consumers have become increasingly blind to marketing and advertising company. The buyer’s journey gets longer and longer, and people are slower to trust companies. What’s a business to do? Build credibility. And it starts with customer testimonials. Imagine that someone is looking for a product you sell. He calls a friend and asks for a recommendation. The friend suggests your product. That person buys from you based on the referral. Customer testimonials work the same way. Instead of communication between friends, it’s communication from one customer to the masses. There are two types of customer testimonials. One is user-generated content….
On the other hand, the last time you shopped on eBay, you may have noticed the use of multiple design elements encouraging you to buy an item (“last item”, “3 watched in the past day”). While these design techniques are used to persuade users, they are usually not deceptive and are considered white hat techniques.
A third example comes from Google I/O 2018 last month when the world heard Google Duplex make a call to a salon for an appointment and carry out a fluent conversation mimicking human mannerisms so well that the person at the other end did not realize she was talking to a machine. The machine did not misrepresent itself as human, nor did it identify itself as a machine, which, in my book, puts it in a gray area. What’s stopping this from being used in black hat design in the near future?
As you see from the three examples above, the use of persuasive tactics can fall anywhere on a spectrum from black hat at one extreme to white hat at the other, with a large fuzzy gray area separating the two. In today’s world of online and email scams, phishing attacks, and data breaches, users are increasingly cautious of persuasive tactics being used that are not in their best interest. Experience designers, developers, and creators are responsible for making decisions around the ethical nature of the tactics we use in our designs.
This article will present a brief history of persuasion, look at how persuasion is used with technology and new media, and present food for thought for designers and developers to avoid crossing the ethical line to the dark side of persuasion.
History Of Persuasion
Persuasion tactics and techniques are hardly new — they have been used for ages. Aristotle’s Rhetoric, over 2000 years ago, is one of the earliest documents on the art of persuasion. The modes of persuasion Aristotle presented were ethos (credibility), logos (reason), and pathos (emotion). He also discussed how kairos (opportune time) is important for the modes of persuasion.
Fast forward to today, and we see persuasion methods used in advertising, marketing, and communication all around us. When we try to convince someone of a point of view or win that next design client or project, chances are we are using persuasion: a process by which a person’s attitudes or behavior are, without duress, influenced by communications from other people (Encyclopedia Britannica).
While Aristotle first documented persuasion, Robert Cialdini’s Influence: The Psychology of Persuasion is more commonly referenced when talking about modern persuasion. According to Cialdini, there are six key principles of persuasion:
People are obliged to give something back in exchange for receiving something.
People want more of those things they can have less of.
People follow the lead of credible, knowledgeable experts.
People like to be consistent with the things they have previously said or done.
People prefer to say yes to those that they like.
Consensus (Social Proof)
Especially when they are uncertain, people will look to the actions and behaviors of others to determine their own.
We have all been exposed to one or more of these principles, and may recognize them in advertising or when interacting with others. While that has been around for ages, what is relatively new is the application of persuasion techniques to new technology and media. This started off with personal computers, became more prominent with the Internet, and is now pervasive with mobile devices.
Persuasion Through Technology And New Media
Behavior scientist B.J. Fogg is a pioneer when it comes to the role of technology in persuasion. Over two decades ago, he started exploring the overlap between persuasion and computing technology. This included interactive technologies like websites, software, and devices created for the purpose of changing people’s attitudes or behaviors. He referred to this field as captology, an acronym based on computers as persuasive technologies, and wrote the book on it, Persuasive Technology: Using Computers to Change What We Think and Do.
Interactive technologies have many advantages over traditional media because they are interactive. They also have advantages over humans because they can be more persistent (e.g. software update reminders), offer anonymity (great for sensitive topics), can access and manipulate large amounts of data (e.g. Amazon recommendations), can use many styles and modes (text, graphics, audio, video, animation, simulations), can easily scale, and are pervasive.
This last advantage is even more pronounced today, with mobile phones being an extension of our arms, and increased proliferation of smart devices, embedded computing, IoT, wearable technology, Augmented Reality, Virtual Reality, and virtual assistants powered by AI being embedded in anything and everything around us. In addition, today’s technological advances allow us to time and target moments of persuasion for high impact, since it is easy to know a user’s location, context, time, routine, and give them the ability to take action. This could be a reminder from your smartwatch to stand or move, or an offer from the coffee shop while you are a few blocks away.
Ethics And New Technology And Interactive Media
The use of persuasion in traditional media over the past decades has raised questions about the ethical use of persuasion. With new media and pervasive technology, there are more questions about the ethical use of persuasion, some of which are due to the advantages pervasive technology has over traditional media and humans. Anyone using persuasive methods to change people’s minds or behavior should have a thorough understanding of the ethical implications and impact of their work.
One of the key responsibilities of a designer during any design process is to be an advocate for the user. This role becomes even more crucial when persuasion techniques are intentionally used in design, since users may be unaware of the persuasion tactics. Even worse, some users may not be capable to detect these tactics, as may be the case with children, seniors or other vulnerable users.
BJ Fogg provides six factors that give interactive technologies an advantage over users when it comes to persuasion:
Persuasive intent is masked by novelty
The web and email are no longer novel, and most of us have wizened up to deceptive web practices and the promises of Nigerian Princes, but we still find novelty in new mobile apps, voice interfaces, AR, VR. Not too long ago, the craze with Pokémon Go raised many ethical questions.
Positive reputation of new technology
While “It must be true — I saw it on the Internet” is now a punchline, users are still being persuaded to like, comment, share, retweet, spread challenges, and make fake news or bot generated content viral.
Would you like a used car salesman following you around after your first visit, continually trying to sell you a car? While that thankfully does not happen in real life, your apps and devices are with you all the time, and the ding and glowing screen have the ability to persistently persuade us, even in places and times that may be otherwise inappropriate. This past Lent, my son took a break from his mobile device. When he started it after Easter, he had hundreds of past notifications and alerts from one mobile game offering all sorts of reminders and incentives to come back and use it.
Control over how the interaction unfolds
Unlike human persuasion, where the person being persuaded has the ability to react and change course, technology has predefined options, controlled by the creators, designers and developers. When designing voice interfaces, creators have to define what their skill will be able to do, and for everything else come back with a “Sorry I can’t help with that”. Just last month, a social network blocked access to their mobile website, asking me to install their app to access their content, without an escape or dismiss option.
Can affect emotion while still being emotionless
New technology doesn’t have emotion. Even with the recent advances in Artificial Intelligence, machines do not feel emotion like humans do. Back to the Google Duplex assistant call mentioned at the beginning, issues can arise when people are not aware that the voice at the other end is just an emotionless machine, and treat it as another person just like them.
Cannot take responsibility for negative outcomes of persuasion
What happens when something goes wrong, and the app or the technology cannot take responsibility? Do the creators shoulder that responsibility, even if their persuasion strategies have unintended outcomes, or if misused by their partners? Mark Zuckerberg accepted responsibility for the Cambridge Analytica scandal before and during the congress hearings.
With these unfair advantages at our disposal, how do we, as creators, designers, and developers make ethical choices in our designs and solutions? For one, take a step back and consider the ethical implication and impact of our work, and then take a stand for our users.
AIGA, the largest professional membership organization for design, has a series on Design Business and Ethics. Design Professionalism author Andy Rutledge also created a Professional Code of Conduct. Both are very detailed and cover the business of design, but not specifically ethics related to design that impacts or influences human behavior.
Other professionals who impact the human mind have ethical principles and codes of conduct, like those published by the American Psychological Association and the British Psychological Society. The purpose of these codes of conduct is to protect participants as well as the reputation of psychology and psychologists themselves. When using psychology in our designs, we could examine how the ethical principles of psychologists are applicable to our work as creators, designers, and developers.
Principles And Questions
Using the Ethical Principles of Psychologists as a framework, I defined how each principle applies to persuasive design and listed questions related to ethical implications of design. These are by no means exhaustive but are intended to be food for thought in each of these areas. Note: When you see ‘design’ in the questions below, it refers to persuasive techniques used in your design, app, product or solution.
Principle A: Beneficence And Nonmaleficence
Do no harm. Your decisions may affect the minds, behavior, and lives of your users and others around them, so be alert and guard against misusing the influence of your designs.
Does your design change the way people interact for the better?
Does the design aim to keep users spending time they didn’t intend to?
Does the design make it easy to access socially unacceptable or illegal items that your users would not have easy access to otherwise?
How may your partners (including third-party tools and SDKs) or “bad guys” misuse your design, unknown to you?
Would you be comfortable with someone else using your design on you?
Would you like someone else to use this design to persuade your mother or your child?
Principle B: Fidelity And Responsibility
Be aware of your responsibility to your intended users, unintended users and society at large. Accept appropriate responsibility for the outcomes of your design.
During design, follow up answers to “How might we…?” with “At what cost?”
What is the impact of your design/product/solution? Who or what does it replace or impact?
If your design was used opposite from your intended use, what could the impact be?
Does your design change social norms, etiquette or traditions for the better?
Promote accuracy, honesty, and truthfulness in your designs. Do not cheat, misrepresent or engage in fraud. When deception may be ethically justifiable to maximize benefits and minimize harm, carefully consider the need for, the possible consequences of, and be responsible for correcting any resulting mistrust or other harmful effects that arise from the use of such techniques.
Do you need users’ consent? When asking for their consent, are they aware of what exactly they are consenting to?
What’s the intent of the design? Is it in the best interest of the user or the creator? Are you open and transparent about your intentions?
Does your design use deception, manipulation, misrepresentation, threats, coercion or other dishonest techniques?
Are users aware or informed if they are being monitored, or is it covert?
Is your design benefiting you or the creators at the expense of your users?
What would a future whistleblower say about you and your design?
Principle D: Justice
Exercise reasonable judgment and take precautions to ensure that your potential biases, the limitations of your expertise does not lead to, or condone unjust practices. Your design should benefit both the creators and users.
Does your design contain any designer biases built in (gender, political, or other)?
Does your design advocate hate, violence, crime, propaganda?
If you did this in person, without technology, would it be considered ethical?
What are the benefits to the creators/business? What are the benefits to the users? Are the benefits stacked in favor of the business?
Do you make it easy for users to disconnect? Do users have control and the ability to stop, without being subject to further persuasion through other channels?
Principle E: Respect For People’s Rights And Dignity
Respect the dignity and worth of all people, and the rights of individuals to privacy, and confidentiality. Special safeguards may be necessary to protect the rights and welfare of vulnerable users.
If you have been designing with white hat techniques, you may appreciate the ethical issues discussed here. However, if you have been designing in the grey or black area, thank you for making it all the way to the end. Ethics in persuasive design are important because they don’t prey on the disadvantages users have when it comes to interactive technology. As creators, designers, and developers, we have a responsibility to stand up for our users.
Today, I’d like to return to a subject that has already been covered in Smashing Magazine in the past — the topic of the print stylesheet. In this case, I am talking about printing pages directly from the browser. It’s an experience that can lead to frustration with enormous images (and even advertising) being printed out. Just sometimes, however, it adds a little bit of delight when a nicely optimized page comes out of the printer using a minimum of ink and paper and ensuring that everything is easy to read.
This article will explore how we can best create that second experience. We will take a look at how we should include print styles in our web pages, and look at the specifications that really come into their own once printing. We’ll find out about the state of browser support, and how to best test our print styles. I’ll then give you some pointers as to what to do when a print stylesheet isn’t enough for your printing needs.
Key Places For Print Support
If you still have not implemented any print styles on your site, there are a few key places where a solid print experience will be helpful to your users. For example, many users will want to print a transaction confirmation page after making a purchase or booking even if you will send details via email.
Any information that your visitor might want to use when away from their computer is also a good candidate for a print stylesheet. The most common thing that I print are recipes. I could load them up on my iPad but it is often more convenient to simply print the recipe to pop onto the fridge door while I cook. Other such examples might be directions or travel information. When traveling abroad and not always having access to data these printouts can be invaluable.
Reference materials of any sort are also often printed. For many people, being able to make notes on paper copies is the way they best learn. Again, it means the information is accessible in an offline format. It is easy for us to wonder why people want to print web pages, however, our job is often to make content accessible — in the best format for our visitors. If that best format is printed to paper, then who are we to argue?
Why Would This Page Be Printed?
A good question to ask when deciding on the content to include or hide in the print stylesheet is, “Why is the user printing this page?” Well, maybe there’s a recipe they’d like to follow while cooking in the kitchen or take along with them when shopping to buy ingredients. Or they’d like to print out a confirmation page after purchasing a ticket as proof of booking. Or perhaps they’d like a receipt or invoice to be printed (or printed to PDF) in order to store it in the accounts either as paper or electronically.
Considering the use of the printed document can help you to produce a print version of your content that is most useful in the context in which the user is in when referring to that print-out.
Once we have decided to include print styles in our CSS, we need to add them to our workflow to ensure that when we make changes to the layout we also include those changes in the print version.
Adding Print Styles To A Page
To enable a “print stylesheet” what we are doing is telling the browser what these CSS rules are for when the document is printed. One method of doing this is to link an additional stylesheet by using the <link> element.
<link media="print" href="print.css">
This method does keep your print styles separate from everything else which you might consider to be tidier, however, that has downsides.
The linked stylesheet creates an additional request to the server. In addition, that nice, neat separation of print styles from other styles can have a downside. While you may take care to update the separate styles before going live, the stylesheet may find itself suffering due to being out of sight and therefore out of mind — ultimately becoming useless as features are added to the site but not reflected in the print styles.
The alternate method for including print styles is to use @media in the same way that you includes CSS for certain breakpoints in your responsive design. This method keeps all of the CSS together for a feature. Styles for narrow to wide breakpoints, and styles for print. Alongside Feature Queries with @supports, this encourages a way of development that ensures that all of the CSS for a design feature is kept and maintained together.
Overwriting Screen CSS Or Creating Separate Rules
Much of the time you are likely to find that the CSS you use for the screen display works for print with a few small adjustments. Therefore you only need to write CSS for print, for changes to that basic CSS. You might overwrite a font size, or family, yet leave other elements in the CSS alone.
If you really want to have completely separate styles for print and start with a blank slate then you will need to wrap the rest of your site styles in a Media Query with the screen keyword.
On that note, if you are using Media Queries for your Responsive Design, then you may have written them for screen.
@media screen and (min-width: 500px)
If you want these styles to be used when printing, then you should remove the screen keyword. In practice, however, I often find that if I work “mobile first” the single column mobile layout is a really good starting point for my print layout. By having the media queries that bring in the more complex layouts for screen only, I have far less overwriting of styles to do for print.
Add Your Print Styles To Your Pattern Libraries And Style Guides
To help ensure that your print styles are seen as an integral part of the site design, add them to your style guide or pattern library for the site if you have one. That way there is always a reminder that the print styles exist, and that any new pattern created will need to have an equivalent print version. In this way, you are giving the print styles visibility as a first-class citizen of your design system.
Basics Of CSS For Print
When it comes to creating the CSS for print, there are three things you are likely to find yourself doing. You will want to hide, and not display content which is irrelevant when printed. You may also want to add content to make a print version more useful. You might also want to adjust fonts or other elements of your page to optimize them for print. Let’s take a look at these techniques.
In CSS the method to hide content and also prevent generation of boxes is to use the display property with a value of none.
Using display: none will collapse the element and all of its child elements. Therefore, if you have an image gallery marked up as a list, all you would need to do to hide this when printed is to set display: none on the ul.
Things that you might want to hide are images which would be unnecessary when printed, navigation, advertising panels and areas of the page which display links to related content and so on. Referring back to why a user might print the page can help you to decide what to remove.
There might be some content that makes sense to display when the page is printed. You could have some content set to display: none in a screen stylesheet and show it in your print stylesheet. Additionally, however, you can use CSS to expose content not normally output to the screen. A good example of this would be the URL of a link in the document. In your screen document, a link would normally show the link text which can then be clicked to visit that new page or external website. When printed links cannot be followed, however, it might be useful if the reader could see the URL in case they wished to visit the link at a later time.
We achieve this by using CSS Generated Content. Generated Content gives you a way to insert content into your document via CSS. When printing, this becomes very useful.
You can insert a simple text string into your document. The next example targets the element with a class of wrapper and inserts before it the string, “Please see www.mysite.com for the latest version of this information.”
content: "Please see www.mysite.com for the latest version of this information.";
You can insert things that already exist in the document however, an example would be the content of the link href. We add Generated Content after each instance of a with an attribute of href and the content we insert is the value of the href attribute – which will be the link.
content: " (" attr(href) ")";
You could use the newer CSS :not selector to exclude internal links if you wished.
If your printed version fits neatly onto one page then you should be able to create a print stylesheet relatively simply by using the techniques of the last section. However, once you have something which prints onto multiple pages (and particularly if it contains elements such as tables or figures), you may find that items break onto new pages in a suboptimal manner. You may also want to control things about the page itself, e.g. changing the margin size.
CSS does have a way to do these things, however, as we will see, browser support is patchy.
The CSS Paged Media Specification opens with the following description of its role.
“This CSS module specifies how pages are generated and laid out to hold fragmented content in a paged presentation. It adds functionality for controlling page margins, page size and orientation, and headers and footers, and extends generated content to enable page numbering and running headers/footers.”
The screen is continuous media; if there is more content, we scroll to see it. There is no concept of it being broken up into individual pages. As soon as we are printing we output to a fixed size page, described in the specification as paged media. The Paged Media specification doesn’t deal with how content is fragmented between pages, we will get to that later. Instead, it looks at the features of the pages themselves.
We need a way to target an individual page, and we do this by using the @page rule. This is used much like a regular selector, in that we target @page and then write CSS to be used by the page. A simple example would be to change the margin on all of the pages created when you print your document.
You can target specific pages with :left and :right spread pseudo-class selectors. The first page can be targeted with the :first pseudo-class selector and blank pages caused by page breaks can be selected with :blank. For example, to set a top margin only on the first page:
To set a larger margin on the right side of a left-hand page and the left side of a right-hand page:
The specification defines being able to insert content into the margins created, however, no browser appears to support this feature. I describe this in my article about creating stylesheets for use with print-specific user agents, Designing For Print With CSS.
Where the Paged Media module deals with the page boxes themselves, the CSS Fragmentation Module details how content breaks between fragmentainers. A fragmentainer (or fragment container) is a container which contains a portion of a fragmented flow. This is a flow which, when it gets to a point where it would overflow, breaks into a new container.
The contexts in which you will encounter fragmentation currently are in paged media, therefore when printing, and also when using Multiple-column layout and your content breaks between column boxes. The Fragmentation specification defines various rules for breaking, CSS properties that give you some control over how content breaks into new fragments, in these contexts. It also defines how content breaks in the CSS Regions specification, although this isn’t something usable cross-browser right now.
And, speaking of browsers, fragmentation is a bit of a mess in terms of support at the moment. The browser compatibility tables for each property on MDN seem to be accurate as to support, however testing use of these properties carefully will be required.
Older Properties From CSS2
In addition to the break-* properties from CSS Fragmentation Level 3, we have page-break-* properties which came from CSS2. In spec terms, these have been superseded by the newer break-* properties, as these are more generic and can be used in the different contexts breaking happens. There isn’t much difference between a page and a multicol break. However, in terms of browser support, there is better browser support for the older properties. This means you may well need to use those at the current time to control breaking. Browsers that implement the newer properties are to alias the older ones rather than drop them.
In the examples that follow, I shall show both the new property and the old one where it exists.
break-before & break-after
These properties deal with breaks between boxes, and accept the following values, with the initial value being auto. The final four values do not apply to paged media, instead being for multicol and regions.
The older properties of page-break-before and page-break-after accept a smaller range of values.
To always cause a page break before an h2 element, you would use the following:
To avoid a paragraph being detached from the heading immediately preceding it:
The older page-break-* property to always cause a page break before an h2:
To avoid a paragraph being detached from the heading immediately preceding it:
On MDN find information and usage examples for the properties:
The Fragmentation specification also defines the properties orphans and widows. The orphans property defines how many lines can be left at the bottom of the first page when content such as a paragraph is broken between two pages. The widows property defines how many lines may be left at the top of the second page.
Therefore, in order to prevent ending up with a single line at the end of a page and a single line at the top the next page, you can use the following:
The widows and orphans properties are well supported (the missing browser implementation being Firefox).
The final property defined in the Fragmentation module is box-decoration-break. This property deals with whether borders, margins, and padding break or wrap the content. The values it accepts are:
For example, if my content area has a 10-pixel grey border and I print the content, then the default way that this will print is that the border will continue onto each page, however, it will only wrap at the end of the content. So we get a break before going to the next page and continuing.
If I use box-decoration-break: clone, the border and any padding and margin will complete on each page, thus giving each page a grey border.
As already mentioned, browser support is patchy for Paged Media and Fragmentation. Where Fragmentation is concerned, an additional issue is that breaking has to be specified and implemented for each layout method. If you were hoping to use Flexbox or CSS Grid in print stylesheets, you will probably be disappointed. You can check out the Chrome bugs for Flexbox and for Grid.
The best suggestion I can give right now is to keep your print stylesheets reasonably simple. Add fragmentation properties — including both the old page-break-* properties as well as the new properties. However, accept that these may well not work in all browsers. And, if you find lack of browser support frustrating, raise these issues with browsers or vote for already raised issues. Fragmentation, in particular, should be treated as a suggestion rather than a command, even where it is supported. It would be possible to be so specific about where and when you want things to break that it is almost impossible to lay out the pages. You should assume that sometimes you may get suboptimal breaking.
Testing Print Stylesheets
Testing print stylesheets can be something of a bore, typically requiring using print preview or printing to a PDF repeatedly. However, browser DevTools have made this a little easier for us. Both Chrome and Firefox have a way to view the print styles only.
Open the Developer Toolbar then type media emulate print at the prompt.
Open DevTools, click on the three dots icon and then select “More Tools” and “Rendering”. You can then select print under Emulate CSS Media.
This will only be helpful in testing changes to the CSS layout, hidden or generated content. It can’t help you with fragmentation — you will need to print or print to PDF for that. However, it will save you a few round trips to the printer and can help you check as you develop new parts of the site that you are still hiding and showing the correct things.
What To Do When A Print Stylesheet Isn’t Enough
In an ideal world, browsers would have implemented more of the Paged Media specification when printing direct from the browser, and fragmentation would be more thoroughly implemented in a consistent way. It is certainly worth raising the bugs that you find when printing from the browser with the browsers concerned. If we don’t request these things are fixed, they will remain low priority to be fixed.
If you do need to have a high level of print support and want to use CSS, then currently you would need to use a print-specific User Agent, such as Prince. I detail how you can use CSS to format books when outputting to Prince in my article “Designing For Print With CSS.”
Prince is also available to install on your server in order to generate nicely printed documents using CSS on the web, however, it comes at a high price. An alternative is a server like DocRaptor who offer an API on top of the Prince rendering engine.
There are open-source HTML- and CSS-to-PDF generators such as wkhtmltopdf, but most use browser rendering engines to create the print output and therefore have the same limitations as browsers when it comes to implementing the Paged Media and Fragmentation specifications. An exception is WeasyPrint which seems to have its own implementation and supports slightly different features, although is not in any way as full-featured as something like Prince.
You will find more information about user agents for print on the print-css.rocks site.
Due to the fact that printing from CSS has really moved on very little in the past few years, many older resources on Smashing Magazine and elsewhere are still valid. Some additional tips and tricks can be found in the following resources. If you have discovered a useful print workflow or technical tip, then add it to the comments below.
The focus of digital technology in the last few decades has neglected human hands and bodies to a large extent. Our thoughts and feelings are strongly connected to the gestures, postures, and actions we perform. I aim to push you — as a designer — to think outside of the zone of screens.
I’d also like to ask you to start thinking critically about current technologies; touch and motor skills need to be taken into consideration when designing your very next product. Allow me to explain why.
“The density of nerve endings in our fingertips is enormous. Their discrimination is almost as good as that of our eyes. If we don’t use our fingers during childhood or youth, we become “fingerblind,” this rich network of nerves is impoverished — which represents a huge loss to the brain and thwarts the individual’s development as a whole. Such damage may be likened to blindness itself. Perhaps worse, while a blind person may simply not be able to find this or that object, the fingerblind cannot understand its inner meaning and value”.
Hold, Push, Swipe, Tap
If you end up as a typical white-collar worker, you’ll probably spend a significant part of your day looking at your screen, without any possibility of physically touching the things you work with. How much time do you spend on your computer at work? How much time do you spend on your phone afterwards. What about during your spare time: What do you do during those hours? Hold, push, swipe, tap.
The word “touch” is in the word “touchscreen,” but tapping and swiping a cold flat piece of matter basically neglects the sense of touch. You are capable of experiencing only a fraction of what your sense of touch allows you to during the long hours of manipulation with touchscreens.
What actions do you physically perform with your body? Perhaps you are not a very active person. What posture are you usually in? What kind of impact can sitting over the screen of a mobile phone or computer all day have on a person? Pablo Briñol, Richard E. Petty and Benjamin Wagner claim in their research article that your body posture can shape your mind.
“… We argue that any postures associated with confidence (e.g., pushing one’s chest out) should magnify the effect of anything that is currently available in people’s minds relative to postures associated with doubt (e.g., slouching forward with one’s back curved).”
Many tangible things are disappearing from our surroundings and reappearing in digital form. They are improved upon and enriched with new functions that would not be possible in the material world. A few examples are maps, calendars, notebooks and pens, printed photos, music players, calculators and compasses. However, with the loss of their material form comes also the loss of the sensations and experiences that only physical interaction with objects can give us. The “… disembodied brain could not experience the world in the same ways that we do, because our experience of the world is intimately tied to the ways in which we act in it,” writes Paul Dourish in his book Where the Action Is.
Different Activities, Different Movements
Consider some actions we perform in the physical world:
I pay for a ticket. I pull my wallet out of my bag. I open it and take out banknotes. While holding the notes in one hand, I draw some coins with my other hand. I give the money to the salesperson.
I confess love. I sit or stand opposite to the person. I look into their eyes. I blush. I say, “You know, I love you.” I am kissed.
I look for a recipe. I choose a cookbook from the shelf. I take the book. I flip a few pages, forwards, backwards. I find a recipe.
Whereas in the world of screens:
I pay for a ticket. I fill text fields. I hit a button.
I confess love. I fill a text field. I hit a button.
I look for a recipe. I fill a text field. I hit a button.
The environment surrounding us, the activities we perform and the things we come into contact with help us to perceive situations more intensely and meaningful. Phenomenologists such as Husserl, Schutz, Heidegger and Merleau-Ponty have already explored the relationship between embodied action and meaning. “For them, the source of meaning (and meaningfulness) is not a collection of abstract, idealized entities; instead, it is to be found in the world in which we act, and which acts upon us. This world is already filled with meaning. Its meaning is to be found in the way in which it reveals itself to us as being available for our actions. It is only through those actions, and the possibility for actions that the world affords us, that we can come to find the world, in both its physical and social manifestations, meaningful.” Another quote from above-mentioned book by Paul Dourish.
Because so many different activities are being carried out in the same manner in the digital world, their value is becoming less clear. I believe that haptic sense has something to do, for instance, with the perception of paying by “real” or by virtual currency — that feeling of something tangible in your hand that you are giving to someone else, compared to just tapping a flat surface to confirm that the number on the screen will be deducted from your account.
How can we create more material experiences in design? What are some tangible solutions, solutions that solve problems through our senses, through our contact with the physical, material world, solutions that let us act in our surrounding as much as possible without using our smartphones or any other flat screens? There are many possible ways to get back to the physical experience.
1. Interact With Digital Technology in a More Human Way.
Make digital information tangible. Interact with it by hand gestures and movements in the material world.
One of the most famous pioneering projects with that aim was SixthSense. Back in 2009, it linked digital devices and our interactions with the physical world. This kind of wearable technology consisted of a camera, a projector hanging on the user’s neck, and color markers stuck to their fingers. The user could dial a phone number using projected keys on their palm, while the camera would record their finger movements. They could read newspapers showing live video news, or draw a circle on their wrist to check the time. The whole principle was to project visuals into the world surrounding the user. With current technology, however, that principle has transformed. The outside world is no longer altered by some projection. The only altered thing is our vision. It’s enhanced by a new layer of augmented reality (AR), by special kinds of glasses, and there is a completely new reality created in virtual reality (VR) headsets.
A more modern example is Magic Leap, a secretive project that connects virtual reality and the “real” world in a mixed reality. You can see objects in your surroundings that are not part of your reality — for example, jellyfish flying in your room. This device is exceptional because it also enables hand tracking. You are able to shoot robots falling from your ceiling, holding a real plastic gun in your hand, meanwhile controlling the interface with hand gestures. This is big progress from mostly sequential activities, which screen interfaces enable the user to do. We are getting there.
Mixed, VR and AR projects could be the future. The good thing is that these technologies are built with a huge emphasis on human behavior, psychology, physics laws and ergonomics. The experience is lived, not just observed on a screen. They are not tearing you away from the natural (or virtual) environment and sticking you in a chair to stare into a flat square. You get involved in the action, immersed in doing things and feeling emotions. All of these technologies bring you experiences. Whether they’re real or not, you will remember them as things that happened to you.
Another advantage is that they make your body move — for example, by replacing your physical screens with virtual ones. They allow you to do your work practically everywhere, possibly on the move as well. Whether you are 3D painting with a virtual brush, throwing squares (a VR game) or organizing your desktop, you are using your fingers, your hands, your wrists and whole body movements. Technology is finally adapting to you.
2. Involve More Sensory Experiences In Your Design.
If sight sensors are already occupied by some functionality, don’t add more visual stimuli. Better to include some haptics, hearing or even olfactory stimuli — thus, creating so-called multi-sensorial design. As noted in their book Product Experience, Hendrik N. J. Schifferstein and Paul Hekkert state, “By now, many different studies have suggested that the greater the number of sensory modalities that are stimulated at any one time, the richer our experiences will be.”
Let’s discuss the topic of virtual reality further. Even though it doesn’t feel like virtual could satisfy the need for material or tangible experience, VR is a perfect example of connecting several senses together, not only sight and hearing, but also touch.
There are a couple of different ways to bring touch into VR:
The classic primitive controllers
They give you the sense of being present, just like holding a mouse, i.e. it’s one object but has a single point of interaction. Well, it actually has two controllers that are controlled by two hands. Still, the full potential of your hands and ten fingers is not being used in this case.
These enable you to feel objects from VR in your hands. The sensors translate touch sensations into vibrations that enable you to perceive the shape of an apple or to experience rain. You can even feel the release of a virtual arrow. Obviously, all of these sensations are not the same as real ones in their fidelity. But as a whole virtual reality, they pose a question: What does it mean to be real? What makes for a real touch experience — a real touched object made of realistic, tangible material or a real feeling transmitted by neurons to your brain? Is it enough to fool your brain, without even using your hands? This is maybe the moment when we can ask, Are we just brains or whole bodies?
Combining haptic gloves with material objects
Various games layer VR over a physical playground. One of them is The Void. As a player, you wear a vest with 22 haptic patches that vibrate and shake you at the right times. The idea is that you are playing the game in VR but all of your surroundings are tangible, so instead of seeing four empty walls, you see a large territory around you. A big stone would be perceived as a mountain, and a normal door could be transformed into a magic one. But opening the magic one would feel real because, in the end, it is. All such little gimmicks with sight, touch, hearing and even smell involve more sensory experience and make VR even more immersive.
3. When Designing For The Screen, Think About How the Task Could Be Performed In The Physical World Instead.
How would people act in their most “natural” way?
Time tracking is not always pleasant, maybe because you feel like a robot from constantly checking the time or opening and closing your time-tracking app. ZEI is a great example of tangible design. The developers found a way to get robots to do our job in the background so that we can act more like humans. This time-tracking device is an octahedron (eight sides). Each face is assigned one activity, so you can easily track time spent on different projects just by flipping it. It presents a very natural way to switch from task to task and to turn your attention from one thing to another.
When you’re designing a product, think of how users would perform without it. How do people track their work? Maybe they tend to take notes. How did people used to complete tasks in the past? Did we stand up from our chair and stretch a bit? What if every accomplished task were to be followed by a small exercise or at least standing up, to support users’ health? Many ridiculous ideas will probably appear in that kind of process, but you can get much closer to designing products for humans with such a human approach.
4. Transfer Your Digital Product To Tangible Experiences.
If you already have a product, program or app designed for the screen, think of whether there is some possibility to convert it to the physical world.
Computers made it possible to compose music by using various musical instruments that exist only in the digital world. But the dynamics of physical contact with the instrument cannot be replaced by using a computer mouse. Physically pushing keys on a piano or hitting drums with drumsticks, fast or softly, using mostly just your fingers and wrists, or blasting drums with your forearms and whole arms — these are experiences that seem to be non-transferable to computer programs.
Ableton, the well-known producer of software for music production, decided to create its own hardware, Ableton Push. The second edition of Ableton Push “puts everything you need to make music in one place — at your fingertips.” Push is basically a table with pads and controls that enable you to play drums or pitched instruments on one device. It offers a range of ways to play and manipulate samples, allowing you to capture ideas quickly. No technology stands in the way, and you can physically interact with music once again.
5. Think the Other Way Around: How Can You Upgrade Things That Already Exist With Some Digital Experience?
Classic toys, board games, paper books and notebooks, musical instruments — all of these have served us for decades and are beautiful, efficient and playful. However, many of them are disappearing because they are no longer attractive enough and are unable to compete with the digital experience. Sustain them. Upgrade them with some digital value and experience.
Playing with wooden toys is one of the best experiences for children. Their material and shape develop children’s building capacity and hand muscles. Their simplicity stimulates children’s imagination and creativity. We should not give up these benefits for a flat screen. Studio deFORM’s project KOSKI, a building block game, “connects the physical world and the digital gaming world together.” Physical, wooden toy blocks are mirrored in an iPad app and enhanced with imaginative worlds, characters and stories on the screen. The player physically alters the projected world on screen by manipulating the blocks in the real time.
While we can argue about whether this game develops a child’s imagination, I find it to be a good alternative to current tablet games.
We’re already used to old-fashioned things. There’s no need to teach users new design patterns or ways of communication with hi-tech novelties. Everyone knows how to use a paper notebook. But often when I want to write with a pen on paper, I have to think twice about it. I know that, in the end, it will have to be rewritten in some digital form so that it can be easily shared and stored. This issue was tackled by Wacom with its notebook digitizer. Its solution was the SmartPad, which converts handwriting into digital files. It also offers the possibility to combine pages of notes and to edit them.
Even existing material can take on new qualities when enriched by the digital experience. Mixing together unexpected things can create very non-traditional objects. Consider FabricKeyboard, made by MIT Media Lab’s Responsive Environments Lab. As Meg Miller explains:
“This fabric made from textile sensors allows you to play the keys like one would on a normal keyboard, or you can create the sounds by manipulating the fabric itself — by pressing, pulling, twisting and even by waving your hands above the material. The e-fabric responds to touch, pressure, stretch, proximity and electric field.”
Finally, let’s consider one more reason why we should think carefully before letting traditional objects vanish away. They’ve been created from years of experience. They’ve evolved into their current form, one that fits their purpose very well. Think of how usable, convenient and pleasurable many printed books are. The rules of layout and typography from this established medium have been transferred very quickly to ebooks and web design, which are struggling to meet the standards of their physical counterparts. Think also of the non-transferable qualities: the tactile sense of progress, their collectibility, the sensuous aspects.
Some old-school materials are worth keeping, and their development should continue even in the digital era.
“We are swinging like a pendulum. Fifty years ago we were rooted in material world. When you wanted to know something, you asked some person or read a book. Then desktop computers became our interface of choice to access information, and now we are swinging back to the real world, but we are bringing computers along. Information is becoming pervasive.”
One way to bring qualities of the real world to our daily used technologies is to learn from material things. Another way is to suss out the attributes we are missing in our interaction with screens. Let your senses lead you, and think about a solution that can replace a current discomfort. The classic human-centered approach still works. However, as advanced technologies improve and extend into multiple areas of our lives, we need to think more carefully about what it means to be human. Our bodies and senses are definitely a part of it.
Do you like filling out forms? I thought not. It’s not what we want from a service. All the user wants is to buy a ticket, book a hotel room, make a purchase and so on. Filling in a form is a necessary evil they have to deal with. Does this describe you? So, what actually affects a person’s attitude to submitting a form?
It might be time-consuming. Complicated forms are often hard to understand (or you just don’t feel like filling it in).
Just last week you may have joined us, along with 8,000 other marketers online for our first ever Marketing Optimization Week. Held over four days (February 20-23), experts from Hanapin, Emma, Zapier, Drift, Microsoft and more shared their tactics for refreshing your marketing and getting past a results slump.
Running 14 sessions total with 13 amazing partners, we were pretty excited to see marketers get so much out of the event:
I presented on the topic of “How to Improve Your Adwords Conversion Rates” as part of the PPC track (we had four tracks in all, including PPC, AI, Marketing Strategy and Automation). Today I’ll share some of the PPC-related takeaways, both from my session and others.
Making the Most of Your PPC Spend
To start, here’s my pop quiz:
If you’ve optimized your AdWords campaigns to no end, but are still seeing smaller and smaller efficiency gains, do you:
Throw more money at it (cost per acquisition be damned!)
Keep on truckin’. (Refine your keyword strategy further and test new ads), or
Start looking at where your ads are pointing to
Call me crazy, but option 3 seems like a no-brainer, right?
It’s like my pal Joe Martinez, Director of Paid Media at Granular Marketing says:
“Ads get traffic. Landing pages get conversions.”
In other words, no matter how good your keyword and bidding strategies are, your ads can’t do the work alone.
The savviest PPC marketers are optimizing as much of the funnel as they can get their hands on, because AdWords CPC’s have nearly tripled since 2012. To ensure you’re not blindly spending, you need to look at where your ads are pointing to.
The question I have is: with landing pages being such low-hanging fruit in terms of paid ad success, why haven’t all marketers figured this out yet?
I tackled this in my presentation covering:
What landing page changes you can make now to lift conversion rates
How to make these changes without talking to your developer
How to set up an A/B test in less than 30 seconds
If you haven’t already, you can sign up to get all the recordings here
Other PPC-Specific Sessions You Can Check out
Throughout the week it was pretty satisfying to see a big focus on post-click optimization as a major area to consider for improving results and getting the most out of your PPC ad spend.
My personal favourite talks within the PPC track were:
PPC Woes And What To Do About Them by Beth Thouin and Richard Beck of Acquisio
Beef Up Your Quality Score With Landing Page Updates by Jeff Baum and Diane Anselmo at Hanapin, and
Unicorn Marketing: Getting Unusually Great Results Across Every Marketing Channel by Larry Kim of Mobile Monkey
Finally, here are some of my top takeaways from the talks above:
1. Optimize your landing pages to get ahead
Acquisio structured their session around addressing the biggest woes PPC marketers face everyday and they provided actionable tips for prolonging the effectiveness of your campaigns past three to four months.
According to Beth and Richard, one of the best ways to get ahead of the competition (and keep your campaigns fresh and high-converting) is to work on your landing pages. Make sure your images are high-quality, pages load fast, and there’s clear message match between your ads and resulting landing pages.
It’s like Richard said during the session: “[forget] the bucket with holes in it! Not having a good landing page is like having a bucket with no bottom in it when it comes to PPC campaigns.”
2. Focus on navigation to increase your Quality Score
So often we get caught up with page load time, copy, and SEO that we forget to focus on intent and how people expect or want to navigate through our landing page information (i.e.: easily). Hanapin’s session went over just how important Quality Score is for PPC campaign performance and how one factor in improving your score via the landing page experience is navigation.
Jeff and Diane use the analogy of a shoe store: the experience after clicking through on a search ad should be akin to walking through a neatly organized shop where everything is labelled, certain types of shoes are grouped together, and you can easily find what you’re looking for in a matter of minutes. When in doubt: the simpler you make your landing page navigation/information hierarchy, the better.
3. Stop trying to optimize donkeys. They will always be donkeys.
During his session at Marketing Optimization Week, Larry Kim outlined the difference between a unicorn and donkey. What’s a marketing unicorn? Typically, these are the pieces of content or campaigns that outperform the rest. They usually make up only a small percentage of everything you run. One of the main points in this talk that resonated with me was that we should stop trying to optimize donkeys and focus exclusively on the unicorns.
Unicorns are unicorns across channels, so when you find one, take it and apply it across your other channels, including PPC. To find unicorns we need to audition lots of content ideas, identify which ones have unusually high engagement rates, and optimize those few for engagement even further.
These takeaways just scratch the surface from Marketing Optimization Week (there are more tracks and engaging speakers). Be sure to grab the recordings and share them with your team!
Every e-commerce business should strive to collect more online reviews. After all, a recent study found that 1 in 5 online shoppers view customer reviews as the single most important factor influencing their decision to make a purchase. But how does web design influence customer reviews? In this article, we’ll look at 3 web design tips e-commerce businesses can use to deliver a better user experience for online shoppers while encouraging more customers to write reviews. Use Visuals to Summarize Important Information At a Glance Chances are, most of your customers’ reviews will center on the same key details. You…
Many of you are probably familiar with Quora. But not everyone knows that Quora can be turned into a perfect marketing tool that will drive high quality targeted traffic and conversions to your website. I made the most out of Quora and continue to use it as one of my major marketing tools for increasing conversions. How, you ask? I’m one of the most viewed writers on many popular topics including videos, online videos, video production, and explainer videos. My answers gained 1.2 million+ views during the last 10 months. Want to know how to make a go of Quora…