Uncovering Buried Branding Treasures: Chrome Developer Tools

Brand-Analysis-Foxtail-MarketingBrand Analysis Tips with Chrome Developer Tools

I loved being a kid. I often watch my nieces and nephews play with their toys and just wonder what kind of things must be going through their minds. Their biggest worries are not about saving money for college, performing well in the workplace, or even thinking about the next meal. They are too busy imagining their next adventure, working towards their dreams of becoming a fireman, and strategizing their hand-holding of the cute neighbor girl. When I was little, I played with my pirate playmobil, watched plenty of Peter Pan, and always dreamt of following a less-than-detailed map to the X that marked the spot, to dig up that coveted buried treasure.

In a digital world that is threatened by different types of pirates, a company without a website is like a ship without a sail or oars. They are virtually non-existent. No one opens up a phone book anymore, and if you don’t find what you’re looking for within the first few pages of a google search, then its pretty much a lost cause. It is expected and assumed in this day and age, that if you are serious about your business, then you will take your time to build a pristine website that will display your product.

Here at Foxtail, we are a Digital Marketing Firm. We create engaging content for our clients that generates organic traffic to their websites, and we generate sales-ready leads through email campaigns, social media ads, and other marketing strategies. When dealing with many different clients, it is often difficult to remember their messaging and design goals. For a designer, like myself, or anyone else creating content for a client, it is vital to leverage their website to obtain a firm understanding of what the client stands for, and how they want to portray their company. Without consistency in their brand between their website and any content created, it makes it more difficult for a potential customer to trust in that company, leaving our work more detrimental than helpful.

The pristine internet browser, Google Chrome, has the pre-baked tools that aid us to achieve this purpose: Chrome Developer Tools. Here are a few simple tips when uncovering the necessary details to effectively market your company’s brand.

With a simple right click on any part of the page, you can select the “Inspect Element” option. This will bring up the developer tools dashboard. The exact location of spoken items on the page will vary depending on your layout, but they will all be included. What you will see is the exact location of the element in the HTML source code, the type of element it is, and the CSS associated with that element. There are other tabs that can be selected for other information.


Discover Hexcode Colors

      1. There are several Chrome Color Picker Extensions that can choose colors from a given web page, but every one that I have tried has not worked properly, and does not pull the correct colors.
      2. You can see the color used on any given part of the page by inspecting the CSS of that element. If it doesn’t show up immediately on the CSS section of the Dashboard, You can scroll down until you see the small square that is the color of the item you are looking to identify. The hexcode is directly to the right of that square, and can be copied and utilized directly in Illustrator, Photoshop, Indesign, or any other design software you may be using.


Uncover Fonts Used

      1. It is important to target the exact font when recreating content for clients. A helpful tip to gain Design Ideas is to view the different pages on the website, analyzing headers, body text, bullet points, and colors.
      2. This is very similar to discovering the color. You can highlight the specific text of whose font you would like to identify, and inspect that element. In the CSS panel, it should show up near the top in the css element, “font-family.” Sometimes with websites, these fonts are inherited from a different stylesheet, but the Dev Tools versatility allows you to view every stylesheet that is associated with that element. With some scrolling and searching, you’ll be able to uncover the font needed to replicate the branding of that company.


See the Image Assets used on the Site

    1. Site images can be repurposed and used in Ad Campaigns, eBooks, or other content created. This helps because you don’t have to do such heavy searching, and you can use an image that has already been approved to portray their brand.
    2. In the Developer Tools Panel, select the tab that says “Resources.” On the left, it will have a hierarchy, where you can select “Frames” and then the tabs below to find “Images.” This is the file where the site images are stored, and they can be easily browse through to find what is needed. It is always important to remember that these images should only be used to promote the marketing for that specific company, and not to be used for any other purpose.

Here are a few quick tips that will help you to see and perform analysis for your clients’ brands, and to uncover that treasure to help you create the best possible content. For more great information on utilizing Chrome Developer Tools for your marketing, feel free to check out this article.

Amanda Hyer

About Amanda Hyer

Amanda is a world-class content manager here at Foxtail. She likes crushing deadlines and suplexing complex content requests.

Foxtail Marketing is a digital marketing firm that provides content marketing, digital marketing, and lead generation services for small and mid-market companies.

Follow us, we are social

CALL or TEXT 1-800-273-2113

© Foxtail Marketing.

Digital Marketing Made Easy.