Learn the design theory behind Facebook's ad units
Published: October 17, 2013
Author: Joe Stanton
-Today’s post is by Diana Madsen, designer at Ampush.
Facebook’s unification of its user experience across various devices meant unifying its native ad platform was a natural next step. As of September 10th, Facebook updated its ad specs, reducing types of ads in addition to recommending much larger sizes for each ad. It may come as a surprise that Facebook requests that ads be equivalent to the size a designer would use when creating a web page (1200 pixels in width). However, taking into account media spending best practices as well as the evolution of technology, Facebook’s new recommendation is, in fact, intuitive.
Let’s take a peek at the recent relationship of consumers to pixels. The introduction of High Definition Television (HDTV) by television manufacturing companies in 1998 was a game changer. Superior image resolution quickly became the standard, as viewers expected clearer and more detailed images. Before the introduction of HDTV, the Standard Definition Television (SDTV) size was 704 x 480 pixels, with an aspect ratio of 4:3 (aspect ratio is an image’s proportional relationship between width and height). Today, we see HDTVs as large as 1920 x 1080 pixels with an aspect ratio of 16:9. To put this into perspective, say you had a 40-inch HDTV; you would need a screen about 11 feet wide to display images at actual size!
This same principle can be applied to web design and the influence of new technology. Despite devices becoming more compact in size, image resolution is more and more important to the consumer. Designers now design on a larger scale format that can be scaled down to generate clear, crisp images. Apple has dubbed this term “Retina display.” The general philosophy is that the bigger the original image, the better its quality when it is scaled down.
Facebook applies this same principle to its new ad sizes. Take its Page post link image as an example. Facebook suggests the image be sized at 1200 x 627 pixels, or in aspect ratio of 1.91:1. This image is resized accordingly from a pixel perspective; 400 x 209 pixels on a desktop, and 560 x 292 pixels in mobile News Feed. Right-hand side ads are a little different, as the final image size is 100 x 72 pixels with an aspect ratio of 1.39:1, which means the image will be not only reduced but also slightly cropped.
Now let’s take this concept and incorporate Facebook’s 20% text rule, which dictates that ads must be 20% or less text, meaning at least 80% is image. Designers must take this into consideration when designing an ad, as a graphic with too much text otherwise runs the risk of becoming illegible when it is reduced. Enforcing the 20% text rule ensures more control over text visibility, so the ad should continue to appear clean and clear when reduced dynamically.
Many designers claim that the print industry is dying. While the verdict is still out – and I’ll spare you my own opinions here! – this outlook on the future of print has bolstered the web industry in the last five years. Web design is no longer a one-size-fits-all solution. More sites are being developed using responsive design, meaning that the site is created to provide an optimal viewing experience across a variety of devices. Facebook has taken the lead on applying this new strategy by unifying its user experience across multiple platforms. Businesses or individuals running ad campaigns on Facebook need only to upload one large-scale image that can be applied across multiple placements (desktop News Feed, mobile News Feed, right-hand side). Clients are now able to conduct accurate A/B(C) testing to determine which placement is best for their campaign.
Ultimately, Facebook has proven itself again to be at the forefront of technology by ensuring that its clients experience success across ad platforms. These well-thought out developments that take the evolution of technology into account enable Facebook to continue as the native platform of choice with clients!
–Diana Madsen is a Designer at Ampush. She graduated with a BFA in Art and Design with a concentration in Graphic Design from Cal Poly, San Luis Obispo. Before Ampush, she was a designer at Nextag and QuinStreet.