Matt kinkaid sales engineer


5 Chrome Extensions for Faster Web Design

FEBRUARY 15, 2017

Website creation and deployment now occurs at the speed of social, with content deployment to all digital touch-points creating new and unique challenges for modern marketers. Whether it's quickly repurposing existing landing-pages, creating a new microsite, or refreshing your product pages, marketers need to stay ahead of the curve if they want to meet their deadlines and fulfill their deliverables. 

To keep up with this thirst for content, there’s a need to drive efficiencies in every aspect of the web development process. Today, we’ll look at enabling marketers with the right tools to add velocity to the first stage of web development: design.


Most projects begin with selecting fonts from approved brand guidelines with specific typefaces baked into the designer’s ideation process.  However, for those designers creating custom projects, doing freelance work, or drawing inspiration from another’s work, it’s important not to spend too much time sampling and matching fonts.

Firebug and Webkit Inspector are easy enough to use for developers. However, for non-technical users, this should not be necessary. With WhatFont, your marketers and designers can sample fonts with a simple mouse hover. 

It also detects the services used for serving the web fonts, so it’s incredibly easy to add them to your Brandcast sites via integrations with Hoefler & Co., TypeKit, and Google Fonts.

You can find WhatFont on Google's Play Store.

WhatFont eliminates guesswork when font matching.

Window Resizer

It’s undeniable that modern web design must take into account different screen sizes, devices, viewports, and resolutions.  As web designers, the need to test designs across numerous screen sizes can slow down the first stages of the web development process.

The Window-Resizer extension re-sizes the browser's window in order to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.

The resolutions list is completely customizable (add/delete/re-order). You can set the window's width/height, window's position, preset icon (phone, tablet, laptop, desktop) and even the option to apply the new dimensions to the entire window or just to the viewport.

Match your auto-resizer with Brandcast’s mobile controls to build pixel perfect experiences for every device. Window-Resizer can be found on the Play Store. 

Auto-Window Resizer let's you choose a viewport on the fly.

ColorZilla Color Picker

Save your corporate approved color swatches and sample colors directly from the page to speed up your web design process.  With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. 

✓ Eyedropper - get the color of any pixel on the page

✓ Advanced Color Picker (i.e. Photoshop)

✓ Ultimate CSS Gradient Generator

✓ Webpage Color Analyzer - get a color palette for any site

✓ Palette Viewer with 7 pre-installed palettes

✓ Color History of recently picked colors

✓ Displays element information like tag name, class, id, size etc.

✓ Auto copy picked colors to clipboard

✓ Keyboard shortcuts 

✓ Get colors of dynamic hover elements 

✓ Single-click to start color picking (currently only on Windows) 

✓ Pick colors from Flash objects

✓ Pick colors at any zoom level

Copy and paste your sampled swatches directly into the Brandcast studio to add velocity to your web design today. Check out ColorZilla's website for the right tool for your browser.

ColorZilla is the go-to tool for quick color matching and blending with myriad applications.

YALIG – Yet Another Lorem Ipsum Generator

So you've asked your designer to get a prototype up-and-running as soon as possible but the copy is yet to be finalized? Get your FPO content to the page lightning fast with a lorem ipsum generator.

Lorem Ipsum is a great way to introduce copy without distracting from the overall design.  Allow stakeholders to focus on the design and visual elements rather than be distracted by legible words on the page.

Insert dummy copy directly through the extension anywhere needed on your Brandcast site:

paragraphs of variable length


specific or random dates

mail addresses- URLs

YALIG can be found on Google's Play store. Take a peak here if you want an easy way to produce temporary content.​

YALIG let's your drag and drop "content" quickly and conveniently.

Full-Page Screen Capture

​Collaboration is key to adding velocity to your web publishing process, especially when that means reviewing design treatments with relevant stakeholders.

We all know how to take a simple screen shot, but what if you want to capture a page that’s larger than your screen?

Full-page screen capture is a quick and easy way to create a static image of one of your web pages to save and share with others. Designers taking a mobile-first approach to their build with long, single page scrolling sites can easily capture the entire experience for feedback, and notes.

You can find Full-Page Screen Capture on the Play Store.

With Full-Page Screen Capture, you can grab the entire page in one shot.​ ​​

These tools coupled with Brandcast will help you launch your campaigns on time and in style. They're not a replacement for experience and expertise, but they will definitely give you a leg up if you're pressed for time or short on resources. ​