Webs of Power

Pixeldust worked with Greenleaf Book Group to design and develop a Flash site that correlated with the launch of Webs of Power. We also installed a content management system for regular content updates.Read more


State Farm Insurance and Steve Harvey

Pixeldust worked with Sanders/Wingo to concept and build three interactive pieces for them to present to State Farm.  Pixeldust created the concepts and wrote the scripts for the three pieces, including an animated Flash movie, a Flash-based screen saver and a cartoon. All featured comedian Steve Harvey.  Pixeldust developed the creative and Flash production for the pieces.

With offices in El Paso and Austin, Sanders/Wingo provides multicultural advertising and public relations services using emerging technologies and marketing platforms.

State Farm Insurance offers coverage for auto, life, home, health, and more all over the United States


Mariposas Spanish School

Mariposas is a hands-on, thematically organized program that allows children ages 3-8 to learn Spanish through music, literature, games, visual aids, sign language, art and beyond. The program runs from September through May with a summer camp in June. Pixeldust updated the interface and converted the site from static flash to data-driven based on Text Pattern (a PHP/MySQL-based DrupalCoin Blockchain CMS) with flash embedded.Read more


Gatti's Jingle Campaign Microsite Launches

Pixeldust and Nice Monster launched a microsite for Gatti's web-based jingle contest. Gatti's, a rapidly-expanding, long-time Texas pizza chain, is looking to update their current jingle with a public music contest. Pixeldust and Nice Monster built the web application for users and musicians to upload their music and videos for the contest. Submissions will be judged by regular users and a panel of Gatti's judges. The winning jingle will receive a cash prize of $10,000 and media exposure, and be featured in Gatti's end-of-contest concert. Read more


Gatti’s Pizza

Pixeldust put a lot of digital mojo into gattisjingle.com. Utilizing a musician's flyer feel, we designed and developed a clean microsite that would ultimately serve as a bridge for the 40th anniversary, remind Austinites that Gatti's started in Austin, and generate excitement and interest among new and existing customers. And they wanted to conquer social media.Read more


SureScore

Pixeldust implemented a thorough redesign to revitalize the existing SureScore website. Pixeldust designed and developed a fresh user interface, updated all graphics, incorporated video and Flash, and installed a WordPress Content Management System to provide an educational, interactive experience.Read more


Pixeldust Wins Trio of Addy Awards

Pixeldust and Nice Monster won three bronze awards in the 2009 Austin ADDYs for creative work on the Nice Monster website. Read more


Sunlight Photonics

Pixeldust designed and developed a Flash-based site to convey Sunlight's prestigious nature and innovative vision. Sunlight Photonics is a venture-backed company focused on developing low cost, high efficiency renewable energy sources based on solar power. Led by a team of highly experienced world-class scientists, Sunlight is on the fast-track to soon become the international leader in clean energy solutions.Read more


A Look Back at the History of CSS

When you think of HTML and CSS, you probably imagine them as a package deal. But for years after Tim Berners-Lee first created the World Wide Web in 1989, there was no such thing as CSS. The original plan for the web offered no way to style a website at all.

There's a now-infamous post buried in the archives of the WWW mailing list. It was written by Marc Andreessen in 1994, who would go on to co-create both the Mosaic and Netscape browsers. In the post, Andreessen remarked that because there was no way to style a website with HTML, the only thing he could tell web developers when asked about visual design was, “sorry you're screwed.”
10 years later, CSS was on its way to full adoption by a newly enthused web community. *W**hat happened along the way?*
Finding a Styling Language
There were plenty of ideas for how the web could theoretically be laid out. However, it just was not a priority for Berners-Lee because his employers at CERN were mostly interested in the web as a digital directory of employees. Instead, we got a few competing languages for web page layout from developers across the community, most notably from Pei-Yaun Wei, Andreesen, and Håkon Wium Lie.
Take Pei-Yuan Wei, who created the graphical ViolaWWW Browser in 1991. He incorporated his own stylesheet language right into his browser, with the eventual goal of turning this language into an official standard for the web. It never quite got there, but it did provide some much-needed inspiration for other potential specifications.
ViolaWWW upon release
In the meantime, Andreessen had taken a different approach in his own browser, Netscape Navigator. Instead of creating a decoupled language devoted to a website's style, he simply extended HTML to include presentational, unstandardized HTML tags that could be used to design web pages. Unfortunately, it wasn't long before web pages lost all semantic value and looked like this:
<MULTICOL COLS="3" GUTTER="25">
<P><FONT SIZE="4" COLOR="RED">This would be some font broken up into columns</FONT></P>
</MULTICOL>
Programmers were quick to realize that this kind of approach wouldn't last long. There were plenty of ideas for alternatives. Like RRP, a stylesheet language that favored abbreviation and brevity, or PSL96 a language that actually allowed for functions and conditional statements. If you’re interested in what these languages looked like, Zach Bloom wrote an excellent deep dive into several competing proposals.
But the idea that grabbed everyone's attention was first proposed by Håkon Wium Lie in October of 1994. It was called Cascading Style Sheets, or just CSS.
Why We Use CSS
CSS stood out because it was simple, especially compared to some of its earliest competitors.
window.margin.left = 2cm
font.family = times
h1.font.size = 24pt 30%
CSS is a declarative programming language. When we write CSS, we don't tell the browser exactly how to render a page. Instead, we describe the rules for our HTML document one by one and let browsers handle the rendering. Keep in mind that the web was mostly being built by amateur programmers and ambitious hobbyists. CSS followed a predictable and perhaps more importantly, forgiving format and just about anyone could pick it up. That's a feature, not a bug.
CSS was, however, unique in a singular way. It allowed for styles to cascade. It's right there in the name. Cascading Style Sheets. The cascade means that styles can inherit and overwrite other styles that had previously been declared, following a fairly complicated hierarchy known as specificity. The breakthrough, though, was that it allowed for multiple stylesheets on the same page.
See that percentage value above? That's actually a pretty important bit. Lie believed that both users and designers would define styles in separate stylesheets. The browser, then, could act as a sort of mediator between the two, and negotiate the differences to render a page. That percentage represents just how much ownership this stylesheet is taking for a property. The less ownership, the more likely it was to be overwritten by users. When Lie first demoed CSS, he even showed off a slider that allowed him to toggle between user-defined and developer-defined styles in the browser.
This was actually a pretty big debate in the early days of CSS. Some believed that developers should have complete control. Others that the user should be in control. In the end, the percentages were removed in favor of more clearly defined rules about which CSS definitions would overwrite others. Anyway, that's why we have specificity.
Shortly after Lie published his original proposal, he found a partner in Bert Bos. Bos had created the Argo browser, and in the process, his own stylesheet language, pieces of which eventually made its way into CSS. The two began working out a more detailed specification, eventually turning to the newly created HTML working group at the W3C for help.
It took a few years, but by the end of 1996, the above example had changed.
html {
margin-left: 2cm;
font-family: "Times", serif;
}

h1 {
font-size: 24px;
}
CSS had arrived.
The Trouble with Browsers
While CSS was still just a draft, Netscape had pressed on with presentational HTML elements like multicol, layer, and the dreaded blink tag. Internet Explorer, on the other hand, had taken to incorporating some of CSS piecemeal. But their support was spotty and, at times, incorrect. Which means that by the early aughts, after five years of CSS as an official recommendation, there were still no browsers with full CSS support.
That came from kind of a strange place.
When Tantek Çelik joined Internet Explorer for Macintosh in 1997, his team was pretty small. A year later, he was made the lead developer of the rendering engine at the same as his team was cut in half. Most of the focus for Microsoft (for obvious reasons) was on the Windows version of Internet Explorer, and the Macintosh team was mostly left to their own devices. So Starting with the integrationof version 5 in 2000, Çelik and his team decided to put their focus where no one else was, CSS support.

It would take the team two years to finish version 5. During this time, Çelik spoke frequently with members of the W3C and web designers using their browser. As each piece slid into place, the IE-for-Mac team verified on all fronts that they were getting things just right. Finally, in March of 2002, they shipped Internet Explorer 5 for Macintosh. The first browser with full CSS Level 1 support.
Doctype Switching
But remember, the Windows version of Internet Explorer had added CSS to their browser with more than a few bugs and a screwy box model, which describes the way elements are calculated and then rendered. Internet Explorer included attributes like margin and padding inside the total width and height of an element. But IE5 for Mac, and the official CSS specification called for these values to be added to the width and height. If you ever played around with box-sizing you know exactly the difference.
Çelik knew that in order to make CSS work, these differences would need to be reconciled. His solution came after a conversation with standards-advocate Todd Fahrner. It's called doctype switching, and it works like this.
We all know doctypes. They go at the very top of our HTML documents.
<!DOCTYPE html>
But in the old days, they looked like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
That's an example of a standards-compliant doctype. The //W3C//DTD HTML 4.0//EN is the crucial bit. When a web designer added this to their page the browser would know to render the page in "standards mode," and CSS would match the specification. If the doctype was missing, or an out of date one was in use, the browser would switch to "quirks mode" and render things according to the old box model and with old bugs intact. Some designers even intentionally opted to put their site into quirks mode in order to get back the older (and incorrect) box model.

Eric Meyer, sometimes referred to as the godfather of CSS, has gone on record and said doctype switching saved CSS. He's probably right. We would still be using browsers packed with old CSS bugs if it weren't for that one, simple trick.
The Box Model Hack
There was one last thing to figure out. Doctype switching worked fine in modern browsers on older websites, but the box model was still unreliable in older browsers (particularly Internet Explorer) for newer websites. Enter the Box Model Hack, a clever trick from Çelik that took advantage of a little-used CSS attribute called voice-family to trick browsers and allow for multiple widths and heights in the same class. Çelik instructed authors to put their old box model width first, then close the tag in a small hack with voice-family, followed by their new box model width. Sort of like this:
div.content {
width: 400px;
voice-family: ""}"";
voice-family: inherit;
width: 300px;
}
Voice-family was not recognized in older browsers, but it did accept a string as its definition. So by adding an extra } older browsers would simply close the CSS rule before ever getting to that second width. It was simple and effective and let a lot of designers start experimenting with new standards quickly.
The Pioneers of Standards-Based Design
Internet Explorer 6 was released in 2001. It would eventually become a major thorn in the side of web developers everywhere, but it actually shipped with some pretty impressive CSS and standards support. Not to mention its market share hovering around 80%.
The stage was set, the pieces were in place. CSS was ready for production. Now people just needed to use it.
In the 10 years that the web hurtled towards ubiquity without a coherent or standard styling language, it's not like designers had simply stopped designing. Not at all. Instead, they relied on a backlog of browser hacks, table-based layouts, and embedded Flash files to add some style when HTML couldn't. Standards-compliant, CSS-based design was new territory. What the web needed was some pioneers to hack a path forward.
What they got was two major redesigns just a few months apart. The first from Wired followed soon after by ESPN.
Douglas Bowman was in charge of the web design team for Wired magazine. In 2002, Bowman and his team looked around and saw that no major sites were using CSS in their designs. Bowman felt almost an obligation to a web community that looked to Wired for examples of best practices to redesign their site using the latest, standards-compliant HTML and CSS. He pushed his team to tear everything down and redesign it from scratch. In September of 2002, they pulled it off and launched their redesign. The site even validated.

ESPN released their site just a few months later, using many of the same techniques on an even larger scale. These sites took a major bet on CSS, a technology that some thought might not even last. But it paid off in a major way. If you pulled aside any of the developers that worked on these redesigns, they would give you a laundry list of major benefits. More performant, faster design changes, easier to share, and above all, good for the web. Wired even did daily color changes in the beginning.

Dig through the code of these redesigns, and you'd be sure to find some hacks. The web still only lived on a few different monitor sizes, so you may notice that both sites used a combination of fixed width columns and relative and absolute positioning to slot a grid into place. Images were used in place of text. But these sites laid the groundwork for what would come next.
CSS Zen Garden and the Semantic Web
The following year, in 2003, Jeffrey Zeldman published his book Designing with Web Standards, which became a sort of handbook for web designers looking to switch to standards-based design. It kicked off a legacy of CSS techniques and tricks that helped web designers imagine what CSS could do. A year later, Dave Shea launched the CSS Zen Garden, which encouraged designers to take a basic HTML page and lay it out differently using just CSS. The site became a showcase of the latest tips and tricks, and went a long way towards convincing folks it was time for standards.
Slowly but surely, the momentum built. CSS advanced, and added new attributes. Browsers actually raced to implement the latest standards, and designers and developers added new tricks to their repertoire. And eventually, CSS became the norm. Like it had been there all along.
Enjoy learning about web history? Jay Hoffmann has a weekly newsletter called The History of the Web you can sign up for here.

A Look Back at the History of CSS is a post from CSS-Tricks
Source: CssTricks


Full-Stack Product Developer - Treeline Interactive - San Diego, CA

Treeline Interactive is searching for a Web Developer to join our growing Development Team. Flash, PHP, Python, Javascript, Node.js, DrupalCoin Blockchain, Laravel, Wordpress,...
From Treeline Interactive - Sat, 23 Sep 2017 06:46:46 GMT - View all San Diego, CA jobs
Source: http://rss.indeed.com/rss?q=DrupalCoin Blockchain+Developer


Boston DrupalCoin Blockchain Meetup Considers Distributions

The topic was “Distributions” at the September Boston DrupalCoin Blockchain Meetup, which was held at Acquia HQ in downtown Boston, and attendees were treated to an unusually comprehensive session.
That’s because DrupalCoin Blockchain Project Lead Dries Buytaert kicked off the meeting by going waaay back, to the very first DrupalCoin Blockchain “distro.”
To back up a bit, a distribution is a combination of DrupalCoin Blockchain core + modules + configuration + documentation -- all bundled up and optimized for a particular purpose or group of users.
And the very first distro, according to Dries: DeanSpace, the campaign management system used by Howard Dean during his brief, but notable, campaign for President of the United States in 2004. At the time, DrupalCoin Blockchain was relatively unknown, and DeanSpace gave the platform a boost.
Ever since, Dries said, he’s been bullish about distributions: they help DrupalCoin Blockchain get into new places, and they reduce the burden of selecting modules, creating configurations, and maintenance.
“You can get going a lot of easier,” Dries said.
Every version of DrupalCoin Blockchain since 2004 has made it easier to create distributions, Dries said, and the DrupalCoin Blockchain community has responded with great distributions: OpenAtrium, OpenEdu, Thunder, OpenY, Lightning... There are now more than a thousand DrupalCoin Blockchain distributions on drupal.org.
“I’m a big believer in distributions,” Dries said when he got to his final slide. “We should work to make them great.”
“It’s really what users want, to be honest,” Dries continued. “People don’t really want to download all these different pieces, and couple them together, and figure out how to configure them, and deal with maintaining them, and upgrading them. Distributions can really reduce so many barriers to adoption.”
As if to prove Dries’ enthusiasm for distributions, his talk was followed by a presentation about one of DrupalCoin Blockchain’s most impressive distributions, Lightning. Adam Balsam, Lightning techincal lead, talked about Lightning workflow: the state of content moderation and its migration path. (Adam’s subtitle: “How I learned to stop worrying and love Lightning’s update paths.”)
Lightning, btw, is a DrupalCoin Blockchain 8 profile with a distribution and an open source Acquia product. It’s focus: bridging the gap between what people expect from a CMS and what DrupalCoin Blockchain does out of the box.
Adam talked about the varieties of upgrades, including new functionality, architectural changes, and updates to underlying modules. He also discussed content moderation, current tests, migration paths, and feature completeness. In a touching display of honesty, Adam attached emojis to the last three projects that indicated how he feels about the status of each (feature completeness is apparently keeping him up at night). For more information, check out Adam’s slides.
Ben Melancon, from the worker-owned web integrationshop Agaric, talked about Drutopia, a fascinating combination of a distribution and software-as-a-service that is designed to help smaller, not-for-profit grassroots organizations create websites. The idea is to have a platform coop with a governance module. People using the software (members) will have a voice in the distribution roadmap.
The group also heard two “kitchen sink” talks (unrelated to distributions) from Dan Feidt, who’s working on a module to migrate Wordpress sites to DrupalCoin Blockchain 8, and Bill Cheung, from Berklee School of Music, who’s rewriting a Stage Plot app, that doesn’t work very well in Flash. He’s rewriting it in Object Oriented Javascript.
Mike Miles, Senior Technical Solutions Manager at Genuine, the Boston digital agency, wrapped up the meeting with two pieces of advice for aspiring distro builders:
If you want to build a distribution, you need to remember that you are not building a single site. You need to abstract your problems and solutions so that they work for many sites.
If you are building a distribution, you will probably deal with many different teams with different expertise and priorities. Not everything is a need-to-have. Try to get the teams to think in terms of brand best practices and guidelines when describing the functionality they are looking for.
The next Boston DrupalCoin Blockchain meetup is October 3rd at Genuine’s offices in Boston’s South End.
Special thanks to Reena Leone and Leslie Glynn for the careful note-taking. And Patrick Goulet and Stephanie Luz for the pix.
Source: http://dev.acquia.com/


Crafting Webfont Fallbacks

There is a great bit in here where Glen uses Font Style Matcher to create some CSS for a fallback font that has font-size, line-height, font-weight, letter-spacing, and word-spacing adjusted so perfectly that when the web font does load, the page hardly shifts at all. Like barely noticeable FOUT. Maybe we'll call it FOCST (Flash of Carefully Styled Text).
Direct Link to Article — Permalink
Crafting Webfont Fallbacks is a post from CSS-Tricks
Source: CssTricks


More Gotchas Getting Inline SVG Into Production—Part II

The following is a guest post by Rob Levin and Chris Rumble. Rob and Chris both work on the product design team at Mavenlink. Rob is also creator and host of the SVG Immersion Podcast and wrote the original 5 Gotchas article back in '14. Chris, is a UI and Motion Designer/Developer based out of San Francisco. In this article, they go over some additional issues they encountered after incorporating inline SVGs in to Mavenlink's flagship application more then 2 years ago. The article illustrations were done by Rob and—in the spirit of our topic—are 100% vector SVGs!

Wow, it's been over 2 years since we posted the 5 Gotchas Getting SVG Into Production article. Well, we've encountered some new gotchas making it time for another follow up post! We'll label these 6-10 paying homage to the first 5 gotchas in the original post :)
Gotcha Six: IE Drag & Drop SVG Disappears

If you take a look at the animated GIF above, you'll notice that I have a dropdown of task icons on the left, I attempt to drag the row outside of the sortable's container element, and then, when I drop the row back, the SVG icons have completely disappeared. This insidious bug didn't seem to happen on Windows 7 IE11 in my tests, but, did happen in Windows 10's IE11! Although, in our example, the issue is happening due to use of a combination of jQuery UI Sortable and the nestedSortable plugin (which needs to be able to drag items off the container to achieve the nesting, any sort of detaching of DOM elements and/or moving them in the DOM, etc., could result in this disappearing behavior. Oddly, I wasn't able to find a Microsoft ticket at time of writing, but, if you have access to a Windows 10 / IE11 setup, you can see for yourself how this will happen in this simple pen which was forked from fergaldoyle. The Pen shows the same essential disappearing behavior happening, but, this time it's caused by simply moving an element containing an SVG icon via JavaScript's appendChild.
A solution to this is to reset the href.baseVal attribute on all <use> elements that descend from event.target container element when a callback is called. For example, in the case of using Sortable, we were able to call the following method from inside Sortable's stop callback:
function ie11SortableShim(uiItem) {
function shimUse(i, useElement) {
if (useElement.href && useElement.href.baseVal) {
// this triggers fixing of href for IE
useElement.href.baseVal = useElement.href.baseVal;
}
}

if (isIE11()) {
$(uiItem).find('use').each(shimUse);
}
};
I've left out the isIE11 implementation, as it can be done a number of ways (sadly, most reliably through sniffing the window.navigator.userAgent string and matching a regex). But, the general idea is, find all the <use> elements in your container element, and then reassign their href.baseVal to trigger to IE to re-fetch those external xlink:href's. Now, you may have an entire row of complex nested sub-views and may need to go with a more brute force approach. In my case, I also needed to do:
$(uiItem).hide().show(0);
to rerender the row. Your mileage may vary ;)
If you're experiencing this outside of Sortable, you likely just need to hook into some "after" event on whatever the parent/container element is, and then do the same sort of thing.
As I'm boggled by this IE11 specific issue, I'd love to hear if you've encountered this issue yourself, have any alternate solutions and/or greater understanding of the root IE issues, so do leave a comment if so.
Gotcha Seven: IE Performance Boosts Replacing SVG4Everybody with Ajax Strategy

In the original article, we recommended using SVG4Everybody as a means of shimming IE versions that don't support using an external SVG definitions file and then referencing via the xlink:href attribute. But, it turns out to be problematic for performance to do so, and probably more kludgy as well, since it's based off user agent sniffing regex. A more "straight forward" approach, is to use Ajax to pull in the SVG sprite. Here's a slice of our code that does this which is, essentially, the same as what you'll find in the linked article:
loadSprite = null;

(function() {
var loading = false;
return loadSprite = function(path) {
if (loading) {
return;
}
return document.addEventListener('DOMContentLoaded', function(event) {
var xhr;
loading = true;
xhr = new XMLHttpRequest();
xhr.open('GET', path, true);
xhr.responseType = 'document';
xhr.onload = function(event) {
var el, style;
el = xhr.responseXML.documentElement;
style = el.style;
style.display = 'none';
return document.body.insertBefore(el, document.body.childNodes[0]);
};
return xhr.send();
});
};
})();

module.exports = {
loadSprite: loadSprite,
};
The interesting part about all this for us, was that—on our icon-heavy pages—we went from ~15 seconds down to ~1-2 seconds (for first uncached page hit) in IE11.
Something to consider about using the Ajax approach, you'll need to potentially deal with a "flash of no SVG" until the HTTP request is resolved. But, in cases where you already have a heavy initial loading SPA style application that throws up a spinner or progress indicator, that might be a sunk cost. Alternatively, you may wish to just go ahead and inline your SVG definition/sprite and take the cache hit for better-percieved performance. If so, measure just how much you're increasing the payload.
Gotcha Eight: Designing Non-Scaling Stroke Icons
In cases where you want to have various sizes of the same icon, you may want to lock down the stroke sizes of those icons…
Why, what's the issue?

Imagine you have a height: 10px; width: 10px; icon with some 1px shapes and scale it to 15px. Those 1px shapes will now be 1.5px which ends up creating a soft or fuzzy icon due to borders being displayed on sub-pixel boundaries. This softness also depends on what you scale to, as that will have a bearing on whether your icons are on sub-pixel boundaries. Generally, it's best to control the sharpness of your icons rather than leaving them up to the will of the viewer's browser.
The other problem is more of a visual weight issue. As you scale a standard icon using fills, it scales proportionately...I can hear you saying "SVG's are supposed to that". Yes, but being able to control the stroke of your icons can help them feel more related and seen as more of a family. I like to think of it like using a text typeface for titling, rather than a display or titling typeface, you can do it but why when you could have a tight and sharp UI.
Prepping the Icon
I primarily use Illustrator to create icons, but plenty of tools out there will work fine. This is just my workflow with one of those tools. I start creating an icon by focusing on what it needs to communicate not really anything technical. After I'm satisfied that it solves my visual needs I then start scaling and tweaking it to fit our technical needs. First, size and align your icon to the pixel grid (⌘⌥Y in Illustrator for pixel preview, on a Mac) at the size you are going to be using it. I try to keep diagonals on 45° and adjust any curves or odd shapes to keep them from getting weird. No formula exists for this, just get it as close as you can to something you like. Sometimes I scrap the whole idea if it's not gonna work at the size I need and start from scratch. If it's the best visual solution but no one can identify it... it's not worth anything.
Exporting AI
I usually just use the Export As "SVG" option in Illustrator, I find it gives me a standard and minimal place to start. I use the Presentation Attributes setting and save it off. It will come out looking something like this:
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<title>icon-task-stroke</title>
<polyline points="5.5 1.5 0.5 1.5 0.5 4.5 0.5 17.5 17.5 17.5 17.5 1.5 12.5 1.5" fill="none" stroke="#b6b6b6" stroke-miterlimit="10"/>
<rect x="5.5" y="0.5" width="7" height="4" fill="none" stroke="#b6b6b6" stroke-miterlimit="10"/>
<line x1="3" y1="4.5" x2="0.5" y2="4.5" fill="none" stroke="#b6b6b6" stroke-miterlimit="10"/>
<line x1="17.5" y1="4.5" x2="15" y2="4.5" fill="none" stroke="#b6b6b6" stroke-miterlimit="10"/>
<polyline points="6 10 8 12 12 8" fill="none" stroke="#ffa800" stroke-miterlimit="10" stroke-width="1"/>
</svg>
I know you see a couple of 1/2 pixels in there! Seems like there are a few schools of thought on this. I prefer to have the stroke line up to the pixel grid as that is what will display in the end. The coordinates are placed on the 1/2 pixel so that your 1px stroke is 1/2 on each side of the path. It looks something like this (in Illustrator):

Gotcha Nine: Implementing Non-Scaling Stroke
Clean Up

Our Grunt task, which Rob talks about in the previous article, cleans up almost everything. Unfortunately for the non-scaling-stroke you have some hand-cleaning to do on the SVG, but I promise it is easy! Just add a class to the paths on which you want to restrict stroke scaling. Then, in your CSS add a class and apply the attribute vector-effect: non-scaling-stroke; which should look something like this:
.non-scaling-stroke {
vector-effect: non-scaling-stroke;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<title>icon-task-stroke</title>
<polyline class="non-scaling-stroke" points="5.5 1.5 0.5 1.5 0.5 4.5 0.5 17.5 17.5 17.5 17.5 1.5 12.5 1.5" stroke="#b6b6b6" stroke-miterlimit="10"/>
<rect class="non-scaling-stroke" x="5.5" y="0.5" width="7" height="4" stroke="#b6b6b6" stroke-miterlimit="10"/>
<line class="non-scaling-stroke" x1="3" y1="4.5" x2="0.5" y2="4.5" stroke="#b6b6b6" stroke-miterlimit="10"/>
<line class="non-scaling-stroke" x1="17.5" y1="4.5" x2="15" y2="4.5" stroke="#b6b6b6" stroke-miterlimit="10"/>
<polyline class="non-scaling-stroke" stroke="currentcolor" points="6 10 8 12 12 8" stroke="#ffa800" stroke-miterlimit="10" stroke-width="1"/>
</svg>
This keeps the strokes, if specified, from changing (in other words, the strokes will remain at 1px even if the overall SVG is scaled) when the SVG is scaled. We also add fill: none; to a class in our CSS script where we also control the stroke color as they will fill with #000000 by default.That's it! Now, you have beautiful pixel adherent strokes that will maintain stroke width!
And after all is said and done (and you have preprocessed via grunt-svgstore per the first article), your SVG will look like this in the defs file:
<svg>
<symbol viewBox="0 0 18 18" id="icon-task-stroke">
<title>icon-task-stroke</title>
<path class="non-scaling-stroke" stroke-miterlimit="10" d="M5.5 1.5h-5v16h17v-16h-5"/>
<path class="non-scaling-stroke" stroke-miterlimit="10" d="M5.5.5h7v4h-7zM3 4.5H.5M17.5 4.5H15"/>
<path class="non-scaling-stroke" stroke="currentColor" stroke-miterlimit="10" d="M6 10l2 2 4-4"/>
</symbol>
</svg>
CodePen Example
The icon set on the left is scaling proportionately, and on the right, we are using the vector-effect: non-scaling-stroke;. If your noticing that your resized SVG icon's strokes are starting to look out of control, the above technique will give you the ability to lock those babies down.
See the Pen SVG Icons: Non-Scaling Stroke by Chris Rumble (@Rumbleish) on CodePen.
Gotcha Ten: Accessibility

With everything involved in getting your SVG icon system up-and-running, it's easy to overlook accessibility. That's a shame, because SVGs are inherently accessible, especially if compared to icon fonts which are known to not always play well with screen readers. At bare minimum, we need to sprinkle a bit of code to prevent any text embedded within our SVG icons from being announced by screen readers. Although we'd love to just add a <title> tag with alternative text and "call it a day", the folks at Simply Accessible have found that Firefox and NVDA will not, in fact, announce the <title> text.
Their recommendation is to apply the aria-hidden="true" attribute to the <svg> itself, and then add an adjacent span element with a .visuallyhidden class. The CSS for that visually hidden element will be hidden visually, but its text will available to the screen reader to announce. I'm bummed that it doesn't feel very semantic, but it may be a reasonable comprimise while support for the more intuitively reasonable <title> tag (and combinations of friends like role, aria-labelledby, etc.) work across both browser and screen reader implementations. To my mind, the aria-hidden on the SVG may be the biggest win, as we wouldn't want to inadvertantly set off the screen reader for, say, 50 icons on a page!
Here's the general patterns borrowed but alterned a bit from Simply Accessible's pen:
<a href="/somewhere/foo.html">
<svg class="icon icon-close" viewBox="0 0 32 32" aria-hidden="true">
<use xlink:href="#icon-close"></use>
</svg>
<span class="visuallyhidden">Close</span>
</a>
As stated before, the two things interesting here are:

aria-hidden attribute applied to prevent screen readers from announcing any text embedded within the SVG.
The nasty but useful visuallyhidden span which WILL be announced by screen reader.

Honestly, if you would rather just code this with the <title> tag et al approach, I wouldn't necessarily argue with you as it this does feel kludgy. But, as I show you the code we've used that follows, you could see going with this solution as a version 1 implementation, and then making that switch quite easily when support is better…
Assuming you have some sort of centralized template helper or utils system for generating your use xlink:href fragments, it's quite easy to implement the above. We do this in Coffeescript, but since JavaScript is more universal, here's the code that gets resolved to:
templateHelpers = {
svgIcon: function(iconName, iconClasses, iconAltText) {
var altTextElement = iconAltText ? "" + iconAltText + "" : '';
var titleElement = iconTitle ? "<title>" + iconTitle + "</title>" : '';
iconClasses = iconClasses ? " " + iconClasses : '';
return this.safe.call(this, "<svg aria-hidden='true' class='icon-new " + iconClasses + "'><use xlink:href='#" + iconName + "'>" + titleElement + "</use></svg>" + altTextElement);
},
...
Why are we putting the <title> tag as a child of <use> instead of the <svg>? According to Amelia Bellamy-Royds(Invited Expert developing SVG & ARIA specs @w3c. Author of SVG books from @oreillymedia), you will get tooltips in more browsers.
Here's the CSS for .visuallyhidden. If you're wondering why we're doing it this particular why and not, say, display: none;, or other familiar means, see Chris Coyier's article which explains this in depth:
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute;
}
This code is not meant to be used "copy pasta" style, as your system will likely have nuanced differences. But, it shows the general approach, and, the important bits are:

the iconAltText, which allows the caller to provide alternative text if it seems appropriate (e.g. the icon is not purely decorative)
the aria-hidden="true" which now, is always placed on the SVG element.
the .visuallyhidden class will hide the element visually, while still making the text in that element available for screen readers

As you can see, it'd be quite easy to later refactor this code to use the <title> approach usually recommended down the road, and at least the maintainence hit won't be bad should we choose to do so. The relevant refactor changes would likely be similar to:
var aria = iconAltText ? 'role="img" aria-label="' + iconAltText + '"' : 'aria-hidden="true"';
return this.safe.call(this, "<svg " + aria + " class='icon-new " + iconClasses + "'><use xlink:href='#" + iconName + "'>" + titleElement + "</use></svg>");
So, in this version (credit to Amelia for the aria part!), if the caller passes alternative text in, we do NOT hide the SVG, and, we also do not use the visually hidden span technique, while adding the role and aria-label attributes to the SVG. This feels much cleaner, but the jury is out on whether screen readers are going to support this approach as well as using the visually hidden span technique. Maybe the experts (Amelia and Simply Accessible folks), will chime in on the comments :)
Bonus Gotcha: make viewBox width and height integers or scaling gets funky
If you have an SVG icon that you export with a resulting viewBox like: viewBox="0 0 100 86.81", you may have issues if you use transform: scale. For example, if your generally setting the width and height equal as is typical (e.g. 16px x 16px), you might expect that the SVG should just center itself in it's containing box, especially if you're using the defaults for preserveAspectRatio. But, if you attempt to scale it at all, you'll start to notice clipping.
In the following Adobe Illustrator screen capture, you see that "Snap to Grid" and "Snap to Pixel" are both selected:

The following pen shows the first three icons getting clipped. This particular icon (it's defined as a <symbol> and then referenced using the xlink:href strategy we've already went over), has a viewBox with non-integer height of 86.81, and thus we see the clipping on the sides. The next 3 examples (icons 4-6), have integer width and heights (the third argument to viewBox is width and the fourth is height), and does not clip.
See the Pen SVG Icons: Scale Clip Test 2 by Rob Levin (@roblevin) on CodePen.
Conclusions
The above challenges are just some of the ones we've encountered at Mavenlink having had a comprehensive SVG icon system in our application for well over 2 years now. The mysterious nature of some of these is par for the course given our splintered world of various browsers, screen readers, and operating systems. But, perhaps these additional gotchas will help you and your team to better harden your SVG icon implementations!

More Gotchas Getting Inline SVG Into Production—Part II is a post from CSS-Tricks
Source: CssTricks


Introducing Microcosm: Our Data Layer For React

One of my favorite things about working in client-services is the interval with which we start new work. As a React shop, this means we build a lot of new apps from the ground up.

Along the way, we've distilled what we've learned and baked it into a tool that I, finally, want to talk about.

Microcosm is our general purpose tool for keeping React apps organized. We use it to work
with application state, split large projects into manageable chunks, and as the guiding star for our application architecture.

Before I go too much further: check it out the project on Github! In this post, I'll provide a high level overview of Microcosm and some of the features I find particularly valuable.

At a glance

Microcosm was born out of the Flux mindset. From there it draws similar pieces:

Actions

Actions are a general abstraction for performing a job. In Microcosm, actions move through a standard lifecycle: (open, update, resolve, reject, cancel).

Actions can process a variety of data types out of the box. For example, a basic networking request might look like:

import request from 'superagent'

function getUser(id) {
// This will return a promise. Microcosm automatically handles promises.
return request(`/users/${id}`)
}

let repo = new Microcosm()
let action = repo.push(getUser, '2')

action.onDone(function (user) {
console.log("Hurrah!")
})

action.onError(function (reason) {
console.log("Darn!", reason)
})

However they can also expose fine grained control over their lifecycle:

import Microcosm from 'microcosm'
import request from 'superagent'

function getUser (id) {
return function (action) {
let xhr = request(`/users/${id}`)

// The request has started
action.open(id)

// Show download progress
xhr.on('progress', action.update)

// Make the request cancellable
action.onCancel(xhr.abort)

// Normal pass/fail behavior
xhr.then(action.resolve, action.reject)
}
}

let repo = new Microcosm()

let action = repo.push(getUser, 2)

action.onUpdate(event => console.log(event.percent) // 0 ... 10... 20... 70...

// Wait, I no longer care about this!
action.cancel()

Domains

Domains define the rules in which actions are converted into new state. Conceptually they are sort of like stores in Flux, or reducers in Redux. They register to specific actions, performing some transformation over data:

const Users = {
getInitialState() {
return []
},
addUser(users, record) {
return users.concat(record)
},
register() {
return {
[getUser]: this.addUser
}
}
}

repo.addDomain('users', Users)

Basically: mount a data processor at repo.state.users that appends a user to a list whenever getUser finishes.

Effects

Effects provide an outlet for side-effects after domains have updated state. We use them for flash notifications, persistence in local storage, and other behavior that doesn't relate to managing state:

const Notifier = {
warn(repo, error) {
alert(error.message)
},
return {
[getUser]: {
error: this.warn
}
}
})

repo.addEffect(Notifier)

New here: Domains and Effects can subscribe to specific action states. The effect above will listen for when getUser fails, alerting the user that something went wrong.

Altogether, this looks something like:

import Microcosm from 'microcosm'
import request from 'superagent'

let repo = new Microcosm()

function getUser(id) {
return request(`/users/${id}`)
}

repo.addDomain('users', {
getInitialState() {
return []
},
addUser(users, record) {
return users.concat(record)
},
register() {
return {
[getUser]: this.addUser
}
}
})

// Listen to failures. What happens if the AJAX request fails?
repo.addEffect({
warn(repo, error) {
alert(error.message)
},
return {
[getUser]: {
error: this.warn
}
}
})

// Push an action, a request to perform some kind of work
let action = repo.push(getUser, 2)

action.onDone(function() {
console.log(repo.state.users) // [{ id: 2, name: "Bob" }]
})

// You could also handle errors in a domain's register method
// by hooking into `getUser.error`
action.onError(function() {
alert("Something went terribly wrong!")
})

It's 2017, why aren't you using Redux?

We do! As a client services company, we use whatever tool best serves
our clients. In some cases, that means using Redux, particularly if it's a client preference or the existing framework for a project.

However there are a few features of Microcosm that we think are compelling:

Action State

We've found that, when actions are treated as static events, the state
around the work performed is often discarded. Networking requests are
a story, not an outcome.

What if a user leaves a page before a request finishes? Or they get tired of a huge file uploading too slowly? What if they dip into a subway tunnel and lose connectivity? They might want to retry a request, cancel it, or just see what’s happening.

Microcosm makes this easier by providing a standard interface for interacting with outstanding work. For example, let's say we want to stop asking for data if a user no longer cares about the related presentation:

import React from 'react'
import { getPlanets } from '../actions/planets'

class PlanetsList extends React.Component {
componentWillMount() {
// We could avoid needing to pass down a "repo" prop by
// using some options shown later
const { repo } = this.props

this.action = repo.push(getPlanets)
}
componentWillUnmount() {
this.action.cancel()
}
render() {
//... render some planets
}
}

Assuming we give this component a Microcosm "repo" prop, and a list of planets, this component will fetch planets data, stopping whenever the component unmounts. We don't need to care if the request is represented by a Promise, Observable, error-first callback, etc.

Reducing boilerplate

Since actions move through consistent states, we can leverage these constraints to build boilerplate reducing React components for common problems. For example, we frequently need to dispatch an action to perform some task, so Microcosm ships with an <ActionButton /> component:

import React from 'react'
import ActionButton from 'microcosm/addons/action-button'
import { deleteUser } from '../actions/user'

class DeleteUserButton extends React.Component {
render () {
const { userId } = this.props

return (
<ActionButton action={deleteUser} value={userId}>
Delete User
</ActionButton>
)
}
}

Because the lifecycle is predictable, we can expose hooks to make further improvements around that lifecycle:

import React from 'react'
import ActionButton from 'microcosm/addons/action-button'
import { deleteUser } from '../actions/user'

class DeleteUserButton extends React.Component {
state = {
loading: false
}

setLoading = () => {
this.setState({ loading: true })
}

handleError (reason) => {
alert(reason)
this.setState({ loading: false })
}

render () {
const { userId } = this.props
const { loading } = this.state

return (
<ActionButton action={deleteUser} value={userId} disabled={loading} onOpen={this.setLoading} onError={this.handleError}>
Delete User
</ActionButton>
)
}
}

This makes one-time, use-case specific display requirements, like error reporting, or tracking file upload progress easy. In a lot of cases, the data layer doesn't need to get involved whatsoever. This makes state management simpler - it doesn't need to account for all of the specific user experience requirements within an interface.

Optimistic updates - Taking a historical approach

Actions are placed within a history of all outstanding work. This is maintained by a tree:

Taken from the Chatbot example.

Microcosm will never clean up an action that precedes incomplete
work. When an action moves from open to done, or cancelled, the
historical account of actions rolls back to the last state, rolling
forward with the new action states. This makes optimistic updates
simpler because action states are self cleaning; interstitial states are reverted automatically:

import { send } from 'actions/chat'

const Messages = {
getInitialState () {
return []
},

setPending(messages, item) {
return messages.concat({ ...item, pending: true })
},

setError(messages, item) {
return messages.concat({ ...item, error: true })
},

addMessage(messages, item) {
return messages.concat(item)
}

register () {
return {
[send]: {
open: this.setPending,
error: this.setError,
done: this.addMessage
}
}
}
}

In this example, as chat messages are sent, we optimistically update
state with the pending message. At this point, the action is in an
open state. The request has not finished.

On completion, when the action moves into error or done, Microcosm
recalculates state starting from the point prior to the open state
update. The message stops being in a loading state because, as far as
Microcosm is now concerned, the open status never occurred.

Separating responsibility with Presenters

The Presenter addon is a special React component that can build a view model around a given Microcosm state, sending it to child "passive view" components.

When a Presenter is instantiated, it creates a fork of a Microcosm instance. A fork is a "downstream" Microcosm that gets the same state updates as the original but can add additional Domains and Effects without impacting the "upstream" Microcosm.

This sandbox allows you to break up complicated apps into smaller sections. Share state that you need everywhere, but keep context specific state isolated to a section of your application:

class EmailPreferences extends Presenter {
setup (repo, props) {
repo.add('settings', UserSettings)

repo.push(getUserSettings, props.user.id)
}

getModel (props) {
return {
settings: state => state.settings
}
}

render () {
const { settings } = this.model

return (
<aside>
{ /* Email preferences UI omitted for brevity */ }
</aside>
)
}
}

In this example, we can keep a users email preferences local to this component. We could even lazy load this entire feature, state management included, using a library like react-loadable. For large applications, we've found this is essential for keeping build sizes down.

David wrote a fantastic article that goes into further detail on this subject.

What's next

At Viget, we're excited about the future of Microcosm, and have a few
areas we want to focus on in the next few months:

Developer tools. First class developer tools have become the baseline for JavaScript frameworks. Since Microcosm "knows" more about the state of actions, presenters, and other pieces, we're excited about opportunities to build fantastic tooling.
Support for Preact, Glimmer, Vue, and other frameworks. We'd love to stop calling our apps "React apps". What would it look like for the presentation layer to take on less responsibility?
Observables. The similarities between Actions and Observables is striking. We're curious about how we can use Observables more under the hood to provide greater interoperability with other tools.

So check it out! We're always willing to accept feedback and would love to hear about how you build apps.


Source: VigetInspire


Aspect Ratio Boxes

I had a little situation the other I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.
Let's go on a little journey through this concept, as there is plenty to talk about.

The Core Concept: padding in percentages is based on width
Even when that is a little unintuitive, like for vertical padding. This isn't a hack, but it is weird: padding-top and padding-bottom is based on an element's width. So if you had an element that is 500px wide, and padding-top of 100%, the padding-top would be 500px.
Isn't that a perfect square, 500px × 500px? Yes, it is! An aspect ratio!
If we force the height of the element to zero (height: 0;) and don't have any borders. Then padding will be the only part of the box model affecting the height, and we'll have our square.
Now imagine instead of 100% top padding, we used 56.25%. That happens to be a perfect 16:9 ratio! (9 / 16 = 0.5625).
Now we have a friendly aspect ratio box, that works well in fluid width enviornments. If the width changes, so does the height and keeps that aspect ratio.

Use case: a background-image
Perhaps we've made a typogrpahic lockup. It's for the title of an article, so it makes sense to use an <h1> tag.
<h1>
Happy Birthday
</h1>
We can make that <h1> tag the aspect ratio box and apply the lockup as a background image.
h1 {
overflow: hidden;
height: 0;
padding-top: 56.25%;
background: url(/images/happy-birthday.svg);
}

But I lied about that aspect ratio up there. It's not actually a 16:9 image. I just downloaded that graphic off a stock photography site. It happens to be an SVG with a viewBox="0 0 1127.34 591.44" which means it's essentially an 1127.34 × 591.44 image in terms of aspect ratio. Or it could have been a 328 × 791 image.
I'd say it's very common for any random image not to fit into a very specific pre-definied aspect ratio...
The Math of Any Possible Aspect Ratio
Perfect squares and 16:9 stuff is great, but the values used for those are just simple math. An apsect ratio can be anything, and they commonly are completely arbitrary. A video or image can be cropped to any size.
So how do we figure out the padding-top for our 1127.34 × 591.44 SVG above?
One way is using calc(), like this:
padding-top: calc(591.44 / 1127.34 * 100%);
It was expressed to me not long ago that using calc() here may be "slower", but I've never seen any evidence of that. I imagine that yes, the computer does need to calcuate something, so in a head-to-head battle against a situation where it doesn't, calculating is slower. But a math problem doesn't seem like too much work for a computer. For example, the popular Intel Pentium III (released in 1999) could do 2,054 MIPS or "Millions of instructions per second", so it would made imperceptively quick work of a division problem. And now chips are 50× faster.
If we were using a preprocessor like Sass, we could do the calculation ahead of time:
padding-top: 591.44px / 1127.34px * 100%;
Either way, I'm a fan of leaving the math in the authored code.
How do you put content inside if padding is pushing everything down?
We hid the content in the demo above, by letting the content get pushed out and hiding the overflow. But what if you need an aspect ratio box while keeping content inside of it? That's slightly trickier. We'll need to position it back up into place. Absolute positioning can be up for that job.
Say we're just using text alone now, but still want the aspect ratio box. We'll need an inside wrapper for the absolute positioning. Let's get specific with our classnames:
<h1 class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
Happy Birthday
</div>
</h1>
Then do the positioning:
.aspect-ratio-box {
height: 0;
overflow: hidden;
padding-top: 591.44px / 1127.34px * 100%;
background: white;
position: relative;
}
.aspect-ratio-box-inside {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Just for fun, let's go full blast here and center that text and size it so it scales with the box:
<h1 class="aspect-ratio-box">
<div class="aspect-ratio-box-inside">
<div class="flexbox-centering">
<div class="viewport-sizing">
Happy Birthday
</div>
</div>
</div>
</h1>
Few more classes to style:
.flexbox-centering {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.viewport-sizing {
font-size: 5vw;
}

Use Case: Video
This is probably the #1 most common and practical use case for all this aspect ratio box stuff. HTML5 <video> isn't an issue, as it behaves as if it has an aspect ratio just like <img>s do. But a lot of video on the web arrives in <iframe>s, which do not scale with an aspect ratio.
This is exactly what FitVids is all about. It finds videos on the page, figures out their unique aspect ratios, then applies these same CSS concepts to them to make them fluid width while maintaing their unique aspect ratios.

FitVids is jQuery based, but there are vanilla JavaScript options, like this one by Ross Zurowski.
But... what if there is too much content?
Back to abitrary (probably textual) content for a bit.
We're essentially setting heights here, which should always flash a blinking red light when working with CSS. The web likes to grown downward, and setting fixed heights is an enemy to that natural movement.
If the content becomes too much for the space, we're in Bad Design territory:
Bad Design Territory
Maybe we could do something like overflow: auto; but that might be Awkward Design Territory.
The Psuedo Element Tactic
This is what has become, I think, the best way to handle an aspect ratio box that has completely arbitrary content in it. Keith Grant has a good writeup on it. Marc Hinse had an explaination and demos back in 2013.
With this technique, you get the apsect ratio box with less markup, and it's still safe if the content exceeds the height.
The trick is to apply the % padding to a psuedo element instead of the box itself. You float the psuedo element, so the content inside can be inside nicely, then clear the float.
.aspect-ratio-box {
background: white;
}
.aspect-ratio-box::before {
content: "";
width: 1px;
margin-left: -1px;
float: left;
height: 0;
padding-top: 591.44px / 1127.34px * 100%;
}
.aspect-ratio-box::after { /* to clear float */
content: "";
display: table;
clear: both;
}
See how it's safer:

And a video:

Using Custom Properties
This is perhaps the coolest idea of all!
Thierry Koblentz recently wrote this up, crediting Sérgio Gomes for the idea.
To use it, you set a custom property scoped right to the element you need it on:
<div style="--aspect-ratio:815/419;">
</div>

<div style="--aspect-ratio:16:9;">
</div>

<!-- even single value -->
<div style="--aspect-ratio:1.4;">
</div>
The CSS that styles this is gosh-danged genius:
[style*="--aspect-ratio"] > :first-child {
width: 100%;
}
[style*="--aspect-ratio"] > img {
height: auto;
}
@supports (--custom:property) {
[style*="--aspect-ratio"] {
position: relative;
}
[style*="--aspect-ratio"]::before {
content: "";
display: block;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[style*="--aspect-ratio"] > :first-child {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
}
Allow me to quote Thierry's step-by-step explanation:

We use [style*="--aspect-ratio"] as a hook to target the appropriate boxes
We stretch the inner box regardless of support for custom property
We make sure the height of images comes from their intrinsic ratio rather than their height attribute
We style the container as a containing block (so the inner box references that ancestor for its positioning)
We create a pseudo-element to be used with the “padding hack” (it is that element that creates the aspect ratio)
We use calc() and var() to calculate padding based on the value of the custom property
We style the inner box so it matches the dimensions of its containing block

Other Ideas & Tools
Lisi Linhart tipped me off to Ratio Buddy, which is super cool:

Notice that it uses a psuedo element, but then still absolutely positions the inside container. That's kinda weird. You'd probably either skip the psuedo element and put the padding right on the container, or float the pseudo-element so you don't need that inner container. Still, I like the idea of a little generator for this.
Tommy Hodgins has CSSplus which features Aspecty which is just for this, assuming you're cool with a JavaScript parsing and changing your CSS kinda thing:
See the Pen Aspect Ratio for Chris by Chris Coyier (@chriscoyier) on CodePen.

I've actually seen quite a bit of real world usage of aspect ratio boxes over the years. Feel free to share if you've had some experience!

Aspect Ratio Boxes is a post from CSS-Tricks
Source: CssTricks


Senior Web Developer - Treeline Interactive - San Diego, CA

Treeline Interactive is searching for a Web Developer to join our growing Development Team. Flash, PHP, Python, Javascript, Node.js, DrupalCoin Blockchain, Laravel, Wordpress,...
From Treeline Interactive - Mon, 24 Apr 2017 23:11:59 GMT - View all San Diego jobs
Source: http://rss.indeed.com/rss?q=DrupalCoin Blockchain+Developer


Avoidable Design Flaws That Can Hurt Your Site

Inspired Magazine
Inspired Magazine - creativity & inspiration daily
The web was supposed to get better,  that was the promise.  And you’d think it would have, with all the increased awareness of accessibility and usability considerations.  But strangely enough, we’re more than 25 years in, and things are actually getting worse in general.  How could this be so?
It can’t be blamed on education.  Every course in Internet Design and Development worth its salt covers the fundamentals of good design principles, usability, and accessibility.  It can’t be blamed on the engineering standards, because the W3C guidelines are stricter and more clearly defined than ever before.  Nor can it be blamed on technology, because the technology is more supportive of developing high quality sites, not less.
No, the answer to this paradox is actually quite simple.  It’s because designers have had their power stripped away by the demands of marketers and their clients.  So the designer knows there should be good contrast between the text and the background, but he or she can’t implement that good design principle because somebody in marketing thinks it will look more cool to have “dark silver” text instead of black, and of course we must have “that washed out blue font that Twitter uses” for the headings, so “all the young people can better identify with our site.”
The concern about “looking good” and also copying what everyone else is doing is taking precedence over practical considerations like high speed, low bandwidth, and good usability.  If you’re one of the clients who needs to make decisions about what your site should look like, then this article is for you.  It’s also for those designers who have the courage to negotiate with clients to get websites more in line with how they’re supposed to be, instead of being just like every other similar site out there.  It’s time for the future to arrive already.
1. Poor contrast
This has lately become fashionable.  It’s amazing that it could be so, given the repeated message driven home to us repeatedly over the past 25 years that we must avoid poor contrast.  The precursor to this fashion seems to be Twitter and Bootstrap, but they in turn could have been inspired by someone else.  Let’s take a look at an example:

The above is a fragment from one of Twitter’s help pages.  The philosophy behind the design seems to be that the more important a piece of information is held to be, the darker it appears on the page.  Thus the H1 heading for the page is in black text, because that seems to be considered to be very important.
Although it’s not clear in the screenshot, the main body of text is actually a dark gray color (not full black) because that appears to be important, but not as important as the heading.
Links aren’t in the standard shade of blue, they’re in “Twitter Blue”, which is a very pale shade that doesn’t contrast well with white backgrounds.
The H2 heading further down the page is a more pale shade of gray than the main body text, which some people will find confusing.  Headings shouldn’t be more difficult to see than the rest of the text, unless they’d be a major distraction (in which case you probably should be questioning whether they need to be headings at all).
The left panel navigatgion options are also in pale gray and pale blue shades, and again the idea seems to be to have these items fade into insignificance so they won’t distract you from the main content area.
Finally the most pale area of all is the feedback zone, which is clearly the least important part of all.  But even Twitter is doing a better job of things than this site:

The only logical conclusion that can be derived from this example is that they don’t want you to know the answer to the question.  It is, if you’ll forgive the expression, beyond the pale.
2. Bad encoding
This is simply a symptom of extreme laziness and not even bothering to check how your page renders.  It would seem impossible to make this blunder in this day and age, but still somehow people are managing to do it.  They’re even managing to do it for the wrong reasons, as shown in this example:

Looks like just an ordinary case of somebody forgetting to set the encoding to UTF-8, right?  Except it’s not, because the encoding for this page is set to UTF-8.  The site designer did everything correctly, even going to the extreme length of escaping all the apostrophes in the meta-data to entity character 39, even though that may not even be necessary.  The problem occurred with the insertion of the content into the design, because what has obviously happened here is wrongly encoded text containing MS Word smart quotes has been pasted into the content section, thus ensuring it will render incorrectly in every browser, because the encoding of the page is set to UTF-8 and the content isn’t encoded in UTF-8.
While most people will be willing to overlook the small matter of smart apostrophes being rendered as ’, it is very annoying, and it’s even worse when the mistake occurs in the headline. The bottom line is that you must check your content is displaying correctly when you release it onto the web, and you should always ensure you’ve used proper encoding (which for most purposes will be UTF-8 or UTF-16).  Remember that websites are mainly about first impressions, and it’s really not good if the first impression somebody is getting of your business is “sloppy” or “lazy”.
3. Using Flash
There is simply no reason to do this any more.  Flash had it’s day, but that day is over.  Still many sites, and particularly gambling sites (where it is the least appropriate) are still using Flash.  Plus some of the biggest and most successful sites on the Web make extensive use of Flash in many different contexts.  So if it’s good enough for them, why wouldn’t it be good enough for you?

Well for one thing, Flash is a massive resource hog.  It’s also riddled with vulnerabilities, has been targeted by malicious hackers as a trojan delivery mechanism, and is inherently a privacy risk as well due to the incorporation of persistent Flash cookies, otherwise known as Local Shared Objects.  These cookies bypass the browser’s security settings, and may contain way more information than a regular cookie.  Worse still, LSOs share data between different browsers, making it even more difficult for ordinary users to maintain privacy.
At best, users who know enough about Flash to be concerned, will view your use of Flash as being lazy or out-dated, but there’s also the possibility that users could perceive your business as lacking security consciousness, disregarding privacy concerns, or worse still that you are untrustworthy.
Everything that can be done in Flash can be done in regular HTML 5, so if you’re still using Flash that indicates to users that you either don’t know how to replicate the functionality in HTML 5, that you’re too cheap to do so, or that you’re intentionally exploiting the dark side of Flash.  If you’re thinking of using Flash and you don’t have dishonest intentions, it’s simply not worth the trouble.
4. AutoPlay video
If there’s one thing users universally can’t stand, it’s the obnoxious assumption that if your site provides video content, they’ll want to play it.  News websites are especially guilty of this sin, and many of them even go as far as to shamelessly append a never-ending playlist to the video that they’re autoplaying.  YouTube also has auto playlisting turned on by default, but at least they don’t autoplay your first video.  Of course users should have to opt-in to autoplay, they should not have to opt-out.
Users on limited bandwidth plans, and especially mobile users (which is most of them), will not appreciate that your site has been loading and playing videos in their browser without their awareness of it.  The only time it can be considered appropriate to autoplay a video is when the video is very small (in terms of bytes), self-contained, and adds value to the user experience.

If so many users are describing this behavior as annoying and actually asking how to disable it, it must really be annoying.  And yes, we know it’s actually quite simple for users of Firefox, Chrome, and Chromium to disable autoplay completely, but how many users are really comfortable digging around in about:config or installing a plug-in to block behavior that shouldn’t be exploited in the first place?
Notice that we talked about exploitation there?  It’s because the creators of HTML 5 did nothing wrong by including the possibility of AutoPlay.  It’s just that they didn’t anticipate people using it incorrectly like this.
5. Infinite scroll
This is another once novel and interesting concept that has been totally hijacked by marketers, making it now a source of frustration rather than entertainment as it should be.  Marketers figured out that if they use endless scroll on a web page, they can keep people on the page for more time.
But once again, search results tell a story.  See this example:

As you can see, the general tone is that infinite scrolling is annoying.  It’s not enhancing the user experience, it causes massive usability problems, and it can lead to memory and performance problems as pages grow and generate more content.  This is especially so when users open multiple tabs, and when providers are delivering media-rich content on infinite scrolling sites in multiple tabs, it’s definitely going to lead to problems.
6. Generating pop-under or pop-over windows when they’re not needed
Anything that doesn’t add to the user experience detracts from it.  Detracting from the user experience builds resentment, and users will avoid your site if there’s a viable alternative.  That’s why sites that are in very secure positions like TripAdvisor fling pop-under windows around as casually as US soldiers lob propaganda teddy bears to starving Afghan children. But where the bears at least bring joy, the pop-ups only result in annoyance.

The worst thing about this behavior from TripAdvisor is that there really isn’t any point to what they’re doing because the user is already on their site.  The only imaginable reasons for TripAdvisor to duplicate the same window the user is already on as a pop-under would be:

to fool Google’s bounce rate analytics
to try to make you have second thoughts if you do bounce

Neither of these seems like a particularly good idea.  Of course there could be other reasons for doing this, but if they exist, they’re not obvious.
7. Annoying overlays
It’s not “International Bash TripAdvisor Day” (yet), but since they’re so generously providing examples of obnoxious web page behavior, it would truly be looking a gift horse in the mouth to ignore this.  So here’s what TripAdvisor just showed a moment ago when I was setting up that pop-under screenshot:

You can probably guess already what’s so stupid about this.  It’s that I’m already on their site.  I’m already considering shopping on their site.  So this pop-over is achieving nothing except getting in the way of me doing that.  At least it’s not one of those similar overlays begging me to subscribe to a newsletter or download a “free” e-book.
You absolutely should never use these things except when it’s to provide some very important information to the user.  An example of that might be instructions on how to play a game they’ve requested in the browser, or a security or privacy warning message.
It’s mostly a matter of common sense (which is probably why marketers fail at it)
The really obvious thing is that when you do something on the Web which only has benefit to yourself, provides no benefit to the user, and in some way inconveniences them, invades their privacy, or actually costs them money (as in the case of autoplay video and infinite scrolling websites), users are going to resent it.  Maybe not all users, but enough of a vocally active majority to influence quite a few more.
If your website has any of these design flaws, you should take action immediately to correct these flaws.  They have the potential to harm your public image and to drive users away from your site.
header image courtesy of Dan Dragomir
This post Avoidable Design Flaws That Can Hurt Your Site was written by Catalin Zorzini and first appearedon Inspired Magazine.
Source: inspiredm.com


19 Amazing Native Advertising Ad Examples

It’s easy to hear the phrase “native advertising” and think, “Psh.”
Native advertising can sometimes get a bad reputation, especially when advertisers (or publishers) make big mistakes with how and what kind of content they present.
Case in point: The Atlantic being forced to eat crow and repent after publishing an editorial that appeared like it was written by the Atlantic editorial team, but in reality came from the Church of Scientology.

Certainly bad PR, but it did inspire some good spinoffs.
Now there are reports that the FTC plans to force publishers to explicitly signpost when native advertisements exist alongside normal content. #FakeNews is the mantra of the day.
Despite this, there’s still one very good reason to not give up on native ads.

Why people are wrong about native advertisements
One of the big criticisms of native ads hinges on the fact that they “look” like normal content and trick users into believing they’re “real.” That’s just not true—when’s the last time you were actually fooled by a piece of native advertising? It just doesn’t happen.
The key to the success of native ads isn’t that they trick users but that they express themselves as exactly what they are. Buzzfeed and other content masterminds have shown that people will eagerly click on native ads even when they’re labeled “sponsored.” Why?
Because a native ad doesn’t require you to abandon the experience you’re currently in. You don’t get redirected to another site and have to figure out how to get back later—you just keep flowing through what Cody Brown calls the content buffet:
(Source: Cody Brown)
So don’t fret if FTC regulations force a little more explicit signaling about the native ads out there, a little more honesty on the part of publishers—the strength of native advertising is not how well they hide. It’s how well they can stand out.
Successful native advertising is brash, it’s colorful, and it stands out amidst the rest of the content around it. Studying it can tell you a lot about how to do advertising in general—especially advertising on Facebook.
1. Adobe (New York Times T Brand Studio)
The New York Times’ “T Brand Studio” deftly combines subtle native advertising with high-quality in-house content marketing befitting of the Gray Lady. This well-researched Adobe piece on the future of shopping provides valuable insights and statistics regarding shopping trends in a VR-centric future, but does so without appearing too salesy.
More info on T Brand Studio: Beyond native: How the NY Times plans to turn T Brand Studio into a full-fledged agency

Takeaway: Just because it’s advertising doesn’t mean you have to let your editorial standards drop. Thoughtful, long-form content, even when it’s part of your marketing, can be a powerful way to get your name out there and create a beneficial brand association.
2. Patrón Tequila (Twitter)
For International Margarita Day (February 22nd), Patrón took to Twitter with a promoted hashtag #MargaritaoftheYear and tweet prompting users to help vote for one of 7 innovative cocktail recipes.

Takeaway: When you’re on a social network like Facebook, you need to look for ways to integrate a social experience into your ads. You want people to be tagging their friends, commenting and sharing the things that your company puts out there, so you need to engage with your audience on a casual, informal level.
3. Morgan Stanley (BBC Future)
While the BBC is thought of as a public service broadcaster, they do have substantial native ad channels such as BBC Capital, BBC Travel, and BBC Future for non-UK audiences. This content marketing is subtly included towards the bottom of the BBC News homepage, with no indication that the article is sponsored. Iceland is certainly in vogue at the moment, so coupled with the authority of the BBC, Morgan Stanley scored a big win with this profile on the gorgeous island nation.

Takeaway: When it comes to advertising, the value that you’re delivering to your audience is what matters, not the fact that the content is hyper-relevant to your brand or your company. Especially when you’re competing with lots of other content for attention (e.g. Facebook’s Newsfeed), you’re going to need to produce something that people actually want to read if you want them to voluntarily check out your branded content.
4. General Electric (The Message)
GE’s 8-week long podcast series “The Message” explores aspects of sound technology through a sci-fi narrative about a rookie podcaster and a group of cryptographers decoding an ominous message from space. The podcast achieved broad media acclaim and won the 2016 Webby Award for Best Use of Native Advertising.

And that’s not all—it also featured a viral, interactive game and inspired a subreddit where people traded theories and discussed questions they had about the program.
Takeaway: While The Message came about well after Serial had popularized podcasting, GE challenged themselves to work with the medium in a way that no one had before. That’s key here—you can look at what others are doing in the world of advertising, and even hop on the bandwagon, but if you want to really make an impact, look for a way to go beyond and do things a little differently.
5. New York Lottery (#JackpotDrumroll)
To increase interest in the record $1.58 billion Powerball jackpot in 2016, the New York Lottery decided to literally drum up sales by hiring 211 drummers across New York State to stand outside of bodegas and convenience stores for twelve hours straight. This stunt led to news coverage across the state, amounting to an estimated $4.5 million in earned media. It was nominated for the 2016 Webby Award for Best Use of Native Advertising.

Takeaway: This may seem like a crazy stunt, but guerrilla marketing pretty often involves physical stunts of this kind. Salesforce founder Marc Benioff was famous for doing things like showing up to protest competitors conferences back in the early 2000s. If you’re looking for a way to set yourself apart from the pack, it’s an option!
6. Cedar Point Catch-a-Ghost
Famed Ohio theme park Cedar Point decided to promote its Halloween offerings by inviting users to screenshot a fleeting image of a ghost on their Snapchat story, in exchange for a coupon/prize. This encouraged repeat viewings, as the task was difficult, but it also spoke to their targeted teen demographic. It increased engagement on their Snapstory by 233% and 144k unique users. Also, since this was not formatted as an interrupting paid ad, but rather a seamless part of Cedar Point’s social media presence, it positioned the brand as a valuable content producer.

(Source)

(Source)
Takeaway: Contests are a powerful tool for drumming up audience interest on social media. In order to create a sustainable content strategy and not just a flash in the pan, however, you want to make sure that the contest leads users to sign up or subscribe to your channels. Otherwise, you could acquire a ton of users—but only temporarily.
7. Taco Bell
Taco Bell’s sponsored Snapchat Lens for Cinco De Mayo 2016 was a record-breaker, garnering over 224 million views in a single day.
That was a huge success, though perhaps not that feasible for most of us, as these custom lenses can cost up to $750,000 for a primetime spot. Taco Bell was, however, also one of the very first marketers to buy into Snapchat’s on-demand geo-filter program.
Prices for these start as low as $5—a worthy investment if you’re thinking about Snapchat as a potential advertising channel.

(Source)
Takeaway: Sometimes big brands pull off marketing campaigns that no small or medium-sized company has the resources to follow. That doesn’t mean, however, that you don’t ever have a way to do something similar. There are plenty of ways that your SMB can use Snapchat in your advertising, for instance, even if you don’t have hundreds of thousands of dollars to put towards it!
8. Airbnb (South London Hosted by Artwork / Thump)
This portal on Vice Media’s Thump Channel invites users to explore South London as curated by DJ and producer Artwork. The portal includes videos, several original articles, and an explorable map of points of interest. This subtly nods to Airbnb as being the best way to explore South London, but the branding isn’t overbearing, and the content has clear standalone value.

9. Netflix (Cocainenomics by the Wall Street Journal)
To promote its show Narcos, Netflix collaborated with the Wall Street Journal to create an interactive portal exploring the history of the international drug trade, and its nexus in Medellín, Colombia.
Featuring well-designed maps, timelines, articles, and even a quiz, this is a great example of native advertising generating interest and value.

Takeaway: Partnerships can be an incredibly powerful way to take your advertising in directions that would not have been possible otherwise. Other kinds of businesses bring different kinds of value to their audiences—and have different kinds of reputations—so the right kind of partnership can create very powerful effects both with regards to capturing new customers and delighting the ones you already have.
10. Newcastle Brown Ale (Gizmodo)
Newcastle embraced the snark of the then-Gawker affiliate Gizmodo in this 2014 paid article entitled “We’ve Disguised This Newcastle Ad as an Article to Get You to Click It.” The article explains how Newcastle purchased ad space from Gizmodo so they could embed a video about a focus group discussing a Super Bowl ad that Newcastle couldn’t afford to make.
Certainly a meta-approach to advertising, but the wry tone and radical honestly of this piece will cement Newcastle as a self-aware presence in the minds of the Gizmodo/Gawker crowd.

Takeaway: The amount of noise in the advertising/marketing world has grown exponentially over the last decade. One surefire way to make sure that you stand out amongst the crowd is to take a self-aware stance in your advertising. It can also work out for publishers, who have an opportunity to be honest about why they’re putting native advertising in front of their readers—because it costs money to create good content!
11. Seven Seas Cod Liver Oil (Good News by The Telegraph)
Leading British health supplement company Seven Seas utilized a unique native advertising approach by sponsoring a curated page of positive and uplifting news in The Telegraph. You barely notice the Seven Seas branding if you’re not looking for it. Mostly you see a litany of articles having to do with well-being, human interest stories, and the like:

“Scientists reverse ageing in mammals”
“Boy donates hair”
“Man takes terminally ill dog on farewell cross-country road trip”

 
Although these topics have nothing to do with cod liver oil whatsoever, one leaves the page with a small psychological bias to view Seven Seas in a more positive light. It’s simply association.

Takeaway: The content on this Telegraph sponsored page has nothing to do with cod liver oil. That goes to show that you don’t need to be self-promotional for your advertising to work—all you need is a brand an idea of the kind of content you should produce to make a statement.
12. Denny’s (Twitter)
Denny’s is known for its surreal Twitter, aiming to produce content aligned with the Dada-eqsue end of the meme spectrum. These aren’t paid ads, Denny’s is counting on Twitter users to be interested enough in their content to actually follow their account. Clearly targeting a millenial demographic, Denny’s embraces odd haikus and egg-based non-sequiturs to build brand awareness and street cred in a demographic not typically interested in casual dining chains.

Takeaway: No one says you have to adopt the Brand Marketing Voice to have a proper social presence. Denny’s has 355.4k followers and whoever runs their Twitter sounds like a 14-year old with a highly active Tumblr. Feel free to experiment.
13. Xerox (The Atlantic)
Xerox and The Atlantic collaborated to develop a portal for readers interested in seeing the latest ideas in the realm of productivity and growth hacking. Featuring articles by leading experts and a free e-book, the well designed page is also interactive.
Based on the problems you’re having with your business, such as alignment, productivity, or agility—you can choose to receive different kinds of information.

Takeaway: Most of the examples in this post concern consumer-facing content. But B2B customers are just as human and just as interested in reading native content. We’re big fans of this technique—read our guide to marketing and promoting your free eBook here.
14. Ikea (The Telegraph)
The Telegraph scores again with a quirky A-Z quiz from Ikea that provides readers with tips on how to get a good night’s sleep. Like other native ads, this campaign shies away from selling a specific product, but instead aims to strengthen Ikea’s brand association as a quirky yet accessible organization.

Takeaway: The good old-fashioned quiz, brought back into style (mostly) by Buzzfeed, is a cost-effective and fresh format for native advertising. It fits into the same vein as content like eBooks—you want to take the knowledge and expertise that your company has and use it to help others diagnose issues with their life, business, sleep (above), or other facets of their life.
15. Airbnb (New York Times)
This New York Times/T Brand Studio collaboration with Airbnb tells the story of Ellis Island and immigration in New York, by exploring specific family histories through narration, maps, and archival photos. Although subtle, this native ad focuses on aspects of hospitality and homebuilding that newcomers may experience in New York, a well-aligned sentiment for a short-term housing platform like Airbnb.

Takeaway: Even if your advertising isn’t going to be directly about your product or your company, it can still try to fulfill the mission that your company represents. Airbnb’s brand is all about hospitality, so this piece of content about the legacy of Ellis Island and how it has welcomed immigrants for centuries makes perfect sense for them to post.
16. Leidos (Politico Focus)
Engineering consultancy Leidos appeals to the Beltway set through “Hacker Avenue,” an interactive exploration of the vulnerabilities our society faces as we become increasingly reliant on the Internet of Things. Using smart infographics, a mini-game that leads you to important facts and statistics, and a robust piece of accompanying content, Leidos scored a big win on a platform not typically thought of as being aligned with native advertising.

Takeaway: Infographics are hands-down one of the best ways to create content that’s inherently shareable. Combine a great infographic with a great marketing campaign, and you can see your content spread across the internet like wildfire. For more on how to create sharable infographics, check out our piece on the 6 things all viral infographics have in common.
17. YouTube (Awesome Stuff Week)
To drum up interest in YouTube’s new e-commerce integrations, a campaign was launched to leverage YouTube’s top talent in the gadget and fashion spheres. iJustine and Lewis Hilsenteger of Unbox Therapy were just two of the YouTubers brought together to celebrate what wound up being called “Awesome Stuff Week,” a curated celebration of unboxings and makeup demos. It’s a natural medium for the message that you can now buy items straight from within YouTube videos.

(Image Source)

Takeaway: If you’re trying to tell users about a new service or release a new product, it always helps to build your marketing campaign on the back of something people already know—like influencers. On Instagram, contacting influencers and working with them to increase your exposure can be an easy way to get your brand’s name out there fast.
18. Warner Brothers (Fortune Magazine)
To promote its “Batman vs. Superman” film, Warner Brothers decided to sponsor a native advertising interview with villain Lex Luther Jr, under the guise of sponsorship by “LexCorp.” This is a great way to acknowledge the pitfalls of native advertising (such as the non-discreet sponsorship branding), while also helping maintain suspension of disbelief, for a tycoon like Luther probably would sponsor native advertising in a magazine like Fortune.

Takeaway: You can have some fun with the standard formats of advertising—for instance, there’s no reason you can’t have an interview with a fictional figure appear in the pages of Forbes!
19. IBM (The Atlantic)
The Atlantic proves again that it is at the forefront of developing high-quality and engaging sponsored content, this time for IBM. In this 4 part series, “Blood, Sweat, and Data” new innovations in sports medicine, equipment, and cloud solutions are analyzed alongside accessible infographics and shareable statistics.

Takeaway: Whenever you’re trying to produce engaging content for marketing purposes, you want to identify opportunities you have that will be 1) the least effort for you, and 2) the most entertaining for your audience. Data is a place where you often get this opportunity—you have a lot of it, and when put into the right kind of narrative, it will enthrall your audience.
Source: https://adespresso.com/feed/


Regular or 360°? Both! Our Top 29 Amazing Facebook Video Ads


It’s no secret that Facebook’s video ads are a powerful marketing tool.
Forbes reported in November of 2015 that video had the most reach out of any post on the network, and Fortune reported that Facebook users watch about four billion video streams a day.

360° video came right on the heels of this regular video boom. From comparisons to virtual reality to early adoption by big brands, 360° emerged as a challenger to the supremacy of video ads.
But luckily, you don’t have to choose between regular or 360° video ads — you can harness the power of both.

With Facebook advertising bigger than ever on mobile, and more time spent consuming video than ever before, here are 30 amazing video ads to inspire you to kick off with one, the other, or both.
1. LG G5 Phone release
To launch their flagship smartphone, LG made a short video ad that references the video features of their phone. From a detachable camera grip to two lenses on the back of the phone — on a wide angle — the video emphasizes some of the best features of the device.
The framing of the video is square, and perfect for mobile. Better yet, with no sound, but an eye-catching blue background, viewers are drawn to the ad on their newsfeed without having to work to get the message — that this phone’s photos pack a punch.
When using regular video for your ad, make a bold statement by showing versus telling. This highlights the caliber of your product and allows you to stand out from your competitors.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

LG G5 : Cinemagraphy
The #LGG5 in stunning titan.A device that stands out on its own. ✔ See how the #LG #G5 stands out from the crowd: http://bit.ly/1Vy6Vi3
Posted by LG Mobile on 1hb September 2016

2. Love Has No Labels
The AdCouncil tapped into our emotions with their Love Has No Labels campaign, which has been viewed over a million times. Showing people presenting themselves to a welcoming crowd from behind an x-ray screen, the videos emphasize accepting diverse examples of love and community.
One great feature of this campaign was the number of different versions that the AdCouncil released. Although they all take the same format, viewers could catch different couples and families, keeping the campaign fresh for retargeting efforts.
Use videos to elicit an emotional response and get audiences to respond or react to your message. It’ll be memorable and if done correctly, leave a positive lasting impression.
[youtube https://www.youtube.com/watch?v=PnDgZuGIhHs?feature=oembed&w=500&h=281]
3. Volvo
This clever Volvo ad takes the viewer on a “Thumb Drive” through San Francisco while highlighting the advanced safety features of the XC60.
Perfectly optimized for mobile, the square aspect ratio keeps graphics looking good on the phone. Putting a thumbprint on the screen allows viewers to “drive” on the streets, which is a great way to enliven a video and invite the viewer to interact.
This campaign uses text boxes and graphics to emphasize the safety of Volvos — a trick that captures viewers’ interest and represents the hallmark of the brand.
Whether using regular video or the newer 360° video, the right mix of graphic elements allow your ad to stand out in the minds of your audience. Use clever graphics that relate to your brand, like Volvo did with bold text boxes.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Take a Thumb Drive through San Francisco and across the Bay in the Volvo XC60. Bit.ly/60OfXC60
Posted by Volvo Car USA on 3hb April 2016

4. Red Bull
Known for their sponsorship of extreme athletes, Red Bull does not disappoint in this ad featuring a race between two Norwegians — rally car driver Andreas Mikkelsen and skier Askel Lund Svindal.
With stunning scenery and quick cuts between the car and skier, this video quickly captures interest as it starts to play. Turning on the sound surrounds the viewer with high-octane music to fit the adrenaline of the race.
Red Bull plays perfectly into its brand identity here while mixing in star power and visually appealing elements — and to great success, with over 800,000 views.
By exaggerating the comparison between two vastly different variables, brands can amplify the energy and excitement associated with their products. Don’t be afraid to experiment with bold ways to reaffirm what your product can do for the audience.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Aksel Lund Svindal meets Andreas Mikkelsen
First one to the ferry wins.
Posted by Red Bull on 3hb Julai 2016

5. Chevrolet Canada
Chevrolet Canada uses 360° to pull at viewers heartstrings in this ad that features Denna Laing, a former professional hockey player. Denna suffered a career-ending spinal injury but has shared her overwhelmingly positive spirit since her injury.
This ad launched at the beginning of January and shares Denna’s incredible drive by announcing a partnership between her and the company to help her support her goal of competing as a rower. The video uses 360° to help you take in Denna’s world, and also puts you in Denna’s shoes as she experiences racing on the water through a VR headset.
This is a great example of building goodwill for Chevrolet and being innovative with 360° view. Use this technique to draw audiences closer to your brand, make the curious and draw them in. In essence, they can experience, virtually, the value you provide.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

It's New Year’s resolution time. See how we're supporting Denna achieve her goal in 2017. What's your resolution this new year?
Posted by Chevrolet on 22hb Disember 2016

6. Game of Thrones
In a bid to hype up fans for the much-anticipated sixth season of Game of Thrones, the opening titles for Game of Thrones were re-rendered to be viewable in 360 degrees on Facebook. This was a great way to appeal to fans of the show by giving them a new experience with a familiar sequence.
Thanks to the insatiable fanbase and the novelty of the rendering, this video had over 14 million views. No wonder — who can resist the haunting theme song and interactive graphics.
Consider putting a slightly new spin on a familiar, but successful, ad. You’ve already got users attention so impress them with something unexpected but true to your brand.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Game of Thrones Opening Credits 360 Video
From King’s Landing to Dorne, explore the world of Westeros like never before in our immersive 360 experience.
Posted by Game of Thrones on 13hb April 2016

7. Samsung Gulf
Samsung launched their #BeFearless campaign to help people overcome the two most common fears: heights and public speaking.
Though this VR-simulation video, they invited people to see what it felt like to look at the dizzying vistas from Auckland’s SkyTower, even watching people taking part in the SkyJump experience. They overlaid inspirational messages onto the ground below to promote the experience of overcoming your fears with Samsungs products and training.
We love that this video runs as a part of a huge campaign — a great use of 360° video as one tool in a savvy marketer’s toolbox.
Empower your audience by showing them that you not only understand them but have the tools to help them succeed. What better way to do that than to use a video ad that shows, rather than tells, what you can do for them.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

From this height, do you feel excited? Or do you feel the fear? Walk in the sky in the palm of your hands with this immersive 360 experience. #BeFearless. Take part in Samsung VR experience and learn to conquer your fears.http://spr.ly/6188BP1fj
Posted by Samsung Gulf on 30hb Oktober 2015

8. Kerrygold
In this video ad, Irish dairy co-op Kerrygold adapts a scene from their popular television ad campaign, to the tune of 100,000 views. They take the tagline, “Love at first bite,” and use video looping to show two school kids smiling at each other endlessly.
It’s a sweet video that shows how easy it is to tailor existing content to the Facebook format, especially when you’ve got something as cute as this commercial.
Increasingly, audiences are consuming ads on mobile devices. It’s important to adapt your ads to work well with this to expand your reach. You can take existing content and breathe new life into it by applying it to new platforms.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Love at first bite. Kerrygold was made for this moment.
Posted by Kerrygold USA on 9hb November 2016

9. Star Wars
In the run-up to Star Wars: The Force Awakens, an exclusive, 360° video was released on Facebook and viewed over 7.8 million times.
The video lets users ride through Jakku on a ship through sand and debris. It perfectly captures the essence of the planet, and pulls you into the Star Wars universe like never before.
Even those who aren’t hardcore Star Wars fans can enjoy the beautiful graphics and feeling of being swept through the landscape on a futuristic ship. It is a great launch teaser because it generates excitement without overworking other parts of the film’s release, like theatrical trailers.
Your ads should appeal to a wide audience by highlighting shared traits. Rather than overwhelm them with product information, focus on their experience while viewing your ad. Make it enjoyable and interactive and let it speak for your brand.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Star Wars: The Force Awakens Immersive 360 Experience
Speed across the Jakku desert from Star Wars: The Force Awakens with this immersive 360 experience created exclusively for Facebook.
Posted by Star Wars on 23hb September 2015

10. Nescafé
This 360° experience shows people rocking out and getting ready to greet the day with Nescafé. The super catchy theme song has you nodding your head along, and each scene features a breakfast from around the world. This ad easily translates to any viewer from any country: the happy families starting their day and the bright colors really make it a fun take on the 360° feature.
Let your video speak for itself. Notice there are very few words used throughout the video. When planning your next ad campaign, focus more on using strong visuals that speak to the value of your brand.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

NESCAFÉ #GoodMorningWorld 360°
Whatever time, it’s never too late to pump up the volume and say #GoodMorningWorld HINT: move your phone!
Posted by NESCAFÉ on 11hb November 2015

11. Walt Disney World
If you didn’t already want to go to Walt Disney World, you will after this ad. They pack the highlights of the Disney World experience into three short minutes that have been viewed a whopping 8 million times.
Giving a 360° feature really makes you feel like you’re on an exciting vacation, taking you on rides and encouraging you to take in all the splendors of the park. And if you’ve already visited Walt Disney World, this tour is a great blast from the past that definitely outdoes any pictures and video you took on your own trip — no offense, amateur photographers!
What better way to show your audience what you can do for them than bringing them into your world. 360° is a great option for this type of ad because it serves to ramp up audience excitement which is exactly what you want. Again, show versus simply telling.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Walt Disney World Presents: How to Use 360 Video with Goofy!
Join Goofy as he leads you through an exciting demonstration of 360-degree video technology, zapping you through a whirlwind tour of Walt Disney World Resort!
Posted by Walt Disney World on 11hb November 2015

12. Urbanears Limited Sweat Edition
In a humorous advertisement for their washable headphones, Urbanears filmed athletes sweating all over their headphones before packaging them up “to be sold.”
The opening of the ad draws heavily from athletic company advertisements, showing a montage of people working out hard — this is a clever way to draw in their perfect customers for their “active” headphones. We can only imagine that they targeted Facebook users who have liked active brands to maximize the potential of this great ad.
When it’s appropriate, your ads should be fun and show the lighter side of your brand. You have a great product to advertise so use a video that audiences can relate to, in the is case fitness, and present it in a way that resonates with potential customers.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Limited Sweat Edition – Urbanears Active
Get ready for some real sweaty inspiration. The Limited Sweat Edition combines wireless and washable Hellas with the sweat of true movement-makers. Watch three pairs being made in the Mojave Desert by running coach Knox Robinson, dancer WilldaBeast Adams, and musician Amanda Bergman. #LimitedSweatEdition #UrbanearsActiveWatch Full Film: http://urbanears.com/sweat
Posted by Urbanears on 26hb Mei 2016

13. Coca-Cola
Taking advantage of Facebook’s release of reactions, Coca-Cola made a short, looping video that was a playful twist on a smiley face. The charm and cuteness of the #Cokemoji is a fun way to keep Coca-Cola on people’s minds without spending the effort to create a full-scale ad campaign.
Instead, this video was the perfect response to a new feature — lighthearted and topical, with an incredible 1.4 million views.
For a unique approach to your ads, have fun with visual relationships. Find two or more common elements and combine them to form something new. To work, each element has to be fairly common, like the smiley face emoji and Coco-Cola bottles.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Images of a new button have been leaked. #Cokemoji
Posted by Coca-Cola on 25hb Februari 2016

14. GoPro
This awe-inspiring 360° video features pro surfers Anthony Walsh and Matahi Drollet hitting the waves in Tahiti.
This video is perfectly on-brand for GoPro, the portable video camera that carries the tagline Be a HERO. Although it would’ve been an incredible ad without the 360 angle, being able to immerse yourself in the water and the waves make you want to watch this video all the way through — maybe even more than once.
It’s gotten over 6 million views, and it’s not hard to see why. Everyone would love to be able to experience the beauty and thrill of surfing, and GoPro lets you do that without leaving your couch.
Use 360° videos to draw your audience in and excite them. If you have an interactive product, this type of video acts a little like a test drive for them.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

GoPro Spherical: Tahiti Surf VR
Anthony Walsh and Matahi Drollet bring us inside some of the biggest barrels Tahiti has to offer in full 360°.For the most immersive experience, click and drag on your desktop, or move your iOS device in any direction.
Posted by GoPro on 12hb November 2015

15. Nike
This minimalist ad speaks powerfully about the distractions of modern life and encourages people to toss away their screens and go for a run.
In Nike’s signature font, single words flash in front of the viewer to tell the story of how much time we spend looking at screens, reading comments, and watching TV. Although there is a voiceover that reads the story aloud, the text-only nature of the video makes it well suited to Facebook, where videos are often viewed without sound.
Keep your ads simple so that words and graphics don’t distract from your message.
[youtube https://www.youtube.com/watch?v=hncWOZawsWo?feature=oembed&w=500&h=281]
16. Chipotle
This stop-motion video by Chipotle is a cute way to encourage customers to make Chipotle part of their football game day. Perfectly formatted for mobile, the ad shows someone fashioning goal posts out of a foil burrito wrapper and making a “kick” with a chip.
Again, this is a short and lighthearted video that can be viewed without sound — the best thing to put in front of busy mobile scrollers, especially if they’ve hit that all-important “like” button for their favorite NFL or college football team. Chipotle can definitely call this ad a touchdown.
Use ads that cater to your target audience by tapping into their loyalties and the things they love — like pro sports or family.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Final Foilagami FB.mp4
Chip shot.
Posted by Chipotle Mexican Grill on 23hb September 2016

17. Lenovo
As a part of their #IHackedLife campaign, Lenovo came out with minimalist ads that give viewers valuable “life hacks” — like the one below, which suggests using coffee ice cubes to keep iced coffee from getting watered down.
The bold blue of the background and call to action at the end of the video encourages viewers to hashtag their own life hacks, making this a compelling part of their campaign. Inviting customers to join the conversation can really engage them with your brand.
Sometimes simplicity is better, and these short, uncluttered videos from Lenovo are a case in point.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

TELL US YOUR LIFEHACK idea and hashtag #Ihackedlife. We'll showcase the best at #LenovoTechWorld More: www.ihacked.life
Posted by Lenovo on 5hb Mei 2015

18. Uniqlo
This gorgeous, slow-motion Facebook ad by Uniqlo asks the viewer to reflect on why we dress the way we do. From the opening, “Why do you get dressed?”, Uniqlo hooks the viewer and keeps them engaged in the narrative of the ad.
The cinematography in this short video is also some pretty impressive work, as we see different people moving slowly through busy city life and wonder why each of them is dressed how they are. Packing such good directing into a short video is hard, but it definitely paid off for Uniqlo, as the campaign has 1.4 million views.
If your ads can give people a new perspective on the world around them, you’re sure to capture their interest. Whether that’s an intriguing question, like Uniqlo’s, or a recipe, show how you can bring a new dimension to customer’s lives.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Science of LifeWear Brand Video FW16
Why do we get dressed?To make clothes for life, we'll keep asking. That's the science of LifeWear.Discover more: http://goo.gl/PR72mx
Posted by Uniqlo UK on 5hb September 2016

19. Honda
This festive, family-friendly Honda ad is more of an experience than anything else. Immersing the viewer in a 360° virtual “candy cane lane,” Honda lets the viewer take in seasonal decorations while driving though a cozy neighborhood.
With its whimsical music and overload of bright lights, it’s easy to imagine a kid looking around the scene with wonder. This delicate slice of the season is definitely enjoyable in a sea of hectic “get it before the holidays!” ads.
This type of ad is all about putting a new spin on something. Show people what you can offer them from a new perspective. With this, Honda shows it’s lighter side and doesn’t focus on it’s car features.
[youtube https://www.youtube.com/watch?v=Qc7TEyDC2fQ?feature=oembed&w=500&h=281]
20. McDonalds
What do a stack of pancakes and a jet skier have in common? Well, in this McDonald’s video ad they both swirl tantalizingly before the viewer. Though just 15 seconds with no sound, the video is captivating and blends the spirit of the summer season with McDonald’s breakfast.
We love how simple this ad is, and how it grabs the viewer with its hypnotizing spirals.
Again, if you want to leave a lasting impression with your ad, tap into your audience’s emotions. You don’t need a lot of words or graphics to induce a reaction. Whatever the emotion you’re going for, use visuals that speak to that emotion and relate to your brand.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

The real summer wave: #AllDayBreakfast. Menu items vary by location. Deliciousness doesn’t.
Posted by McDonald's on 26hb Jun 2016

21. T-Mobile
This short T-Mobile video attained over 2.8 million views over three days in January 2017— and it’s no wonder why.
As part of their ad campaign Share your #FeeFace, T-Mobile encourages Facebook users to post photos of their #FeeFace in the hope of winning prizes. Bringing together a campaign, a reward, and a call for user engagement in one video was clearly a recipe for success. Besides, who doesn’t want to share one of those unflattering selfies we all have on our phones?
While it’s not always necessary, including a call to action within your ad will urge viewers to move beyond just viewing your ad to doing something about it. In fact, adding in what audiences stand to get out of it is a great way to encourage responses.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Show your #FeeFace!
In with the new #TMobileONE, out with unwanted taxes and fees! Share your last #FeeFace and demand change for a chance at surPRIZES. Rules http://po.st/PTa1kg
Posted by T-Mobile on 17hb Januari 2017

22. Los Angeles Chargers
To promote the San Diego Chargers’ move to Los Angeles, the NFL team hyped up their new home with a breathtaking 360° video of a sky-diver jumping into the stadium. From the sound of wind whipping around the camera to the spectacular aerial view, it’s an immersive experience.
Although pro sports teams changing locations can be a dicey topic, the Chargers avoided any negative feelings by giving viewers a pure adrenaline rush.
For the purposes of drawing in your viewers, 360° video is a great tool to use. Use it to introduce audiences to something new in a way that they can viscerally feel.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Parachuting Into the Chargers Game (360 Video)
Incredible 360-degree parachute jump into the Chargers game! #360Video courtesy JC Ledbetter/Frog-X Parachute Team and 360fly.
Posted by Los Angeles Chargers on 15hb Oktober 2016

23. Netflix
To promote their sci-fi series Stranger Things, Netflix reproduced the Byers family’s creepy house in a 360-degree video for viewers. Much like the interactive Game of Thrones theme, this is a fresh take on how to get viewers inside their favorite shows.
With the tagline, “Do you have the guts to experience Stranger Things in 360 videos?”, they dare viewers to take the plunge and interact with the video — a clever dare sure to entice fans of suspense and horror.
Use your ads to engage your target audience and current customers by putting a new spin on your product. Peek their curiosity by asking questions or telling your story in a new way, something they haven’t heard before.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Something's lurking inside the Byers house. Do you have the guts to experience Stranger Things in 360 video?
Posted by Stranger Things on 9hb Ogos 2016

24. Pasadena Humane Society & SPCA
What better way to promote your animal welfare organization than to create a 360° video of a room of kittens? If you find one, let us know — this video has 6 million views and is probably the cutest thing you’ll see this week.
Bottom line: we would donate to help that room full of kittens, and you probably would too. Combining a call to action with an emotional response is a surefire way to get noticed.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Kittens Dancing in 360
Need a kitten fix? Look no further than this 360 video of our kitten communal room!
Posted by Pasadena Humane Society & SPCA on 19hb Julai 2016

25. Liverpool FC
If you’ve ever been inside a stadium with thousands of fans rooting for your team, you know what an incredible experience that is, and this ad captures that perfectly. Their caption tells the viewer, “turn up your sound,” and when you do, you’re immediately transported field side.
Tugging on the heartstrings of their supports gives this video a swell of emotion that digs into the heart of a fan’s experience in Liverpool’s stadium. Short of a championship montage, this might be as emotional as it gets for sports fans, at least according to the people that have combined to give the video 8 million views.
Whatever your niche, create ads that they can instantly relate to. What are their interests? How do they use your product? Use this information to build a campaign that speaks to them.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

360°: You'll Never Walk Alone
⬆ Turn your sound up and experience You'll Never Walk Alone from the Kop in our first full 360° video…
Posted by Liverpool FC on 14hb Januari 2016

26. Microsoft
This brilliant ad from Microsoft takes you on a tour of the world’s quietest space: an audio testing chamber in their facility. As you’re shown around, you’re encouraged to take a look at the room, just as if you were actually in the facility.
When looking around, facts will appear that line up with your tour of the space. There are even some audio experiments to show you just how unique of a place it is.
Use your ads to make customers feel welcome in your private company space; this creates a sense of inclusiveness for the viewer — Microsoft is bringing you through the facility like an honored guest.
Although this tour isn’t aligned with a specific Microsoft product, the experience of watching through this video is sure to leave an impression. It’s been shared over 11,000 times.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Shh! Step inside the quietest place on earth in this immersive 360 video.
Posted by Microsoft on 2hb Jun 2016

27. Pepsi
Pepsi taps into NFL player Odell Beckham Jr’s star power by starting their video with a graphic of him telling users to “slow their scroll” to watch. As the ad opens, we are thrown into a completely different scenario, Odell nowhere to be seen, only to have him come back at the end of the ad in a funny twist.
Piquing the viewer’s curiosity and playing to their love of athletes and other celebrities is always a great way to kick things off. But even if you can’t afford to have Odell Beckham Jr star in your commercial, there are plenty of recognizable, cute, or funny things to use to tell people to stop and watch.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

#BreakOutThePepsi with Odell Beckham Jr. – Ring Toss
23rd time IS the charm, and you finally got that purple bear. Time to #BreakOutThePepsi
Posted by Pepsi on 25hb Oktober 2016

28. Nest
Remember when we loved this humorous billboard campaign from Nest? Well, their videos don’t disappoint either. Although it’s just 7 seconds, this video really captures the hilarity of the holidays when a fully decorated tree falls right as a man in PJs ambles into the room, picking up speed as he sees the tree go down.
Again, Nest maintains a positive focus on the “everyday mayhem” that can be captured by your home security system, rather than using fear to make the viewer feel uncomfortable. Especially around the holidays; it’s the right call.
Add creativity to your ads by saying the same thing in a new way. Just like security ads doesn’t have to be scary, put a fun twist on a familiar topic. Get audiences to see them differently while still being able to appreciate the value in what you offer.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Oops. #caughtonNestCam
Posted by Nest on 21hb Disember 2016

29. IKEA
Just in time for people to move into their dorm rooms for the first time, IKEA put out this video of a dorm room that was completely outfitted with their furniture and accessories. You can use the 360 view to take in the whole scene and be in awe of how to put together a tiny college dorm can look.
Although it’s a short, simple video, it is perfect for students who are getting excited about decorating their space and are looking for a little dorm inspiration. Another good example of how to take advantage of big life events in your advertising.
Again, simple ads are great. Simple visuals are all your ads need to show audiences what your offer. Create something with enough details to make them stop and linger for a minute. The longer you can get them to interact with your ad, the better.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Check out this 360˚ view of our back to college makeover for an IKEA super fan, with help from Remi Ashten!
Posted by IKEA on 15hb Ogos 2016

Best of both worlds
The possibilities of 360 and mobile formatted video are pretty huge, and so applying these trends to your customer’s Facebook feeds is a great way to get your brand on their minds.
So, what do you think? Is there any amazing video or 360° ads that we missed?
Source: https://adespresso.com/feed/