Author: Juan Lucero

Mobile Slideup – Fixed-Width v1.1

  • Tracking pixel dimensions added

Banner 728×90

NOTE: I am not able to simulate the Disclaimer Text (“Sponsored Content”) using the current methodology.

v1.0

v1.1

  • Disclaimer spacing adjustments

v1.2

  • Added .ac_pixel styles

v1.3 (Current)

  • NOTE: I am not able to simulate the Disclaimer Text (“Sponsored Content”) using the current methodology.
  • Added border:none; to a.ac_image_link to prevent CSS from adding an underline
  • Fixed issue where .ac_image margin-top was set to -5px
  • Added .ac_credit a{border: none;} to fix hover positioning bug
  • Removed .ac_sponsored css since banners don’t offer that option
  • Reduced max-height of .ac_title to prevent .ac_referrer from overlapping .as_disclaimer
  • Adjusted position of .ac_referrer and .ac_disclaimer give them each a little bit more space (spacing is still tight)
  • Added reset css
  • Family Friendly Modal Update
  • Added zero margin & padding styles to .ac_pixel

Widget Templates

Widget TypeTheme
Above-The-ArticleClean 4×1
Overlay 4×1
Large 2×1
Large Inset 2×1
SidebarClean
Overlay
Tiled
Staggered
Sidebar-TextStories
Below-The-ArticleClean 4×2
Clean 3×3
Overlay 4×2
Overlay 3×3
Tiled 6ads 2rows
Tiled 12ads 4rows
Staggered 5ads 2rows
Below-The-Article-TextStories
Slideshow-EndClean
Overlay
Exit-Intent-PopDefault Theme
Mobile-SlideupMobile-Slideup 2×2
Mobile-Slideup 2×1
Banner-Slot300×250
300×250 2×2
300×600
300×600 2×5
320×50
728×90
Push-Notification-APIAPI-Response
Widget Template
Fixed-WidthResponsive
Legacy ThumbnailClean
Feed
Overlay
Shaded		Clean
[none]
Overlay
Shaded
Legacy TextStoriesStories
Legacy Banners300×250
300×250 2×2
300×600
300×600 5×2
320×50
728×90		[none]
Legacy Exit Popv1.0v1.0
v1.1Tracking Pixel Dimensionsv1.1Tracking Pixel Dimensions
v1.2 Sponsored By Updatesv.1.2 Sponsored By Updates
v.1.3 – (Current) Click Outside to Close Update. Updated “Sponsored Links” logo image v.1.3 – (Current) Click Outside to Close Update. Updated “Sponsored Links” logo image
Legacy Mobile Slide-upv1.0 
v1.1 Tracking Pixel Dimensions 
v.1.2 Sponsored By Updatesv.1.2 Sponsored By Updates
Deprecatedv1.3 – (Current) 2×2 layout. Reduce 2×1 layout height. Reset CSS
Widget TypeLayout
RTB SSPleft2col
right1col
Test WidgetsBottom Sticky Banner: 2×1, 3×1
Hover/Chat: Blue Link Chat Bubble
Spoutable Departure Page
News
Read More Test Widget
Test Mobile Exit Pop
Mobile Slide-up Custom
Large Image Widget Template
Large Image 300×250 Widget Template
LKQD Video POC
Mobile Slide-up 2×2 Clean 2-Col
Mobile Slide-up 2×2 Overlay
Image Centric Exit Pop
Desktop Slider 4×1
Desktop Slider 2×2
Mobile Toaster

Departure Page – Responsive v1.2

  • Bugs
    • Fixed position issue
    • Fixed right column alignment issue
    • Removed extra margin above & below ad block
    • Fixed width greater than screen size issue
    • Fixed :nthchild(4n) hard coded column number bug
    • Removed fixed height to resolve bug where background is shorter than content
    • Fixed z-index issue

Departure Page – Responsive v1.1

  • Tracking pixel dimensions added

Departure Page – Fixed-Width v1.2

  • Bug fixes
    • Fixed Departure page position issue
    • Fixed column alignment-right issue
    • Fixed width greater than screen size issue
    • Removed :nth-child(4n) hard coded column number bug
    • Removed fixed height to resolve bug where background is shorter than content
    • Fixed issue where the Departure page becomes an exit pop at medium screen sizes
    • Fixed z-index issue

Departure Page – Fixed-Width v1.1

  • Tracking pixel dimensions added

YouTube Video Test

In this dramatic video a gunman has barricaded himself inside a house in Russia. The police handle this about as strongly as you can. They shoot up the house from all angles and try to flush him out with a stick of dynamite. It’s seriously over the top.

As you can see, they pretty much demolish the house.

Note to self: the Russians do not play

Responsive Design and Bootstrap

“A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries,…” –Wikipedia

In a nut shell, responsive design practices allow for the content of a single web page or web site to flow naturally into any size device.

Take google.com for instance; on your phone, it looks and feels natural. You can see and do most of the same things on Google no matter if you’re on your desktop computer, laptop, tablet, or what ever else you have in your pocket.

Now wrap your brain around this blog post. It has a header, menu, this article, sidebars, footers, maybe ads, etc. But if you’re on mobile, you can already see how that content has been reorganized to fit neatly on to your screen. A prime example is the universal menu icon sometimes comically called the “hamburger” or “pancake” menu due to it’s iconic shape. This little widget squeezes all of the main site navigation into a tiny little package so you can get right to the guts of this article without having to scroll too far.

But reorganizing that content logically on any device is no simple task. Enter Twitter’s open source responsive library: Bootstrap! It has CSS, JS, and code snippets for a vast array of layouts and functionalities. Tabs, menus, and buttons – oh my!

So, just for a quick example, I reworked an older version of my Resume site using Bootstrap libraries. The libraries I used here were graciously provided by MaxCDN and can be found on the Bootstrap site under “Getting Started: Bootstrap CDN”.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>