Techie Tuesday: Developer Tools

I haven't covered this issue yet on Techie Tuesday's, but I've gotten a lot of questions in which this preliminary information is needed, so I thought I would outline it. You can use developer tools to extract information about your site. Today we are going to focus on a very basic and small element of it - finding the colors and fonts used on your site. We will also use it to see how you can test your website on multiple devices within your browser

1. Go to View < Developer < Developer Tools. A window will appear at either the bottom or right side of your browser. This window shows you the code used to run this website.

2. At the top-left corner of this new window, you will see a magnifying class. select it.

3. Now hover over elements of your mouse. As you hover over them, they will highlight. In the Developer Tool Window, you will see "style" information change and update.

4. You can now find out the specific fonts and colors of your site by hover over the elements. In the style dashboard, you will see the same format - "color: #number" or "font-family: "font name"" 


Here's the example - Finding the exact hex color for the pink background of Charmingly Styled's Site - #ffe7ee. See if you can find it on your own! 


 There's a few things I want to note here:
+ This can get very confusing depending on how much you know with code and how your designer developed your site. The element you are highlighting should have the same color and font as you see in CSS window, if not scroll up or down.
+ You will also see elements with lines struck through them. This means that in the CSS stylesheet a subsequent style overruled what is struck out.


 VIEWING BLOG ON MULTIPLE PLATFORMS: This method does not work if you have the responsive functionality disabled from your blogger site. I'm using 312Beauty as an example.

1. Next to the magnify class, you will see a smartphone looking icon. Click it.

2. For "Device" select the device you'd like to view your site on.

3. You can use the swap icon to switch views from horizontal and vertical layout.


 If your site looks messed up on a mobile version (i.e. cell phones), check it with your phone. If it is messed up on  your phone, in most cases, you can assume it is messed up on a majority of smart phones. To fix it, you have a few quick (and free options), by enabling Blogger or WordPress versions or use a third-party plugin to make it responsive. I believe that these are short terms solutions. With these solutions, one loses his/her individual branding of the site, and it is not the most curated experience. As more and more blog readers are coming from mobile, this might be a big reason you want to address. 

 Firefox has a similar developer tool, but Safari does not.


To read more about developer tools, I recommend these links: Developer Tools Tutorial from Google Chrome // Youtube Video for the Visual/Experiential Learners // HTML5 Rocks


Do you have tech or design questions you would like answered? "Techie Tuesdays" is a weekly series written by Lindsay Humes of White Oak Creative. In order to make this series as beneficial to Midwest Bloggers, you can email your specific questions to Lindsay at hello@whiteoakcreative.com, and she will answer them in her weekly series.