 |
| Screenshot of Inspect Element on the ONA Mizzou blog |
Whether you're an experienced coder or beginner blogger, Chrome tools can make you life a whole lot easier.
Chrome has a number of free extensions and built-in features that make it an ideal browser for all of your blogging needs.
Using just a few Chrome tools will help you begin to think like a web designer and allow you to easily customize and enhance your blog, portfolio or website.
Here are six of my favorite free Chrome tools (most of which I use every day):
1. Inspect Element
Inspect Element is your entry point to learning and implementing basic CSS and HTML on your website. If you know even a small amount of code, you can use Inspect Element to see the code on any website. This tool is helpful because you can use it on sites you like to copy pieces of code to use on your own website.
To access Inspect Element, right click on any website while using Chrome. In the pop up menu, select "Inspect." This will open the Inspect Element window. From here you can select elements on the website and match those elements with their CSS properties. Chrome has more instructions online.
Inspect Element may look a bit overwhelming, but I promise you can use it even if you only know a small amount of code. I recommend using a free program like Code Academy to learn the basics of CSS and HTML. Understanding the overall syntax will be a huge help for your website and for any career in digital media.
2. Page Ruler
Page Ruler is my most-used Chrome extension besides Pocket (see below). Page Ruler allows you to measure any website elements in pixels. I use Page Ruler primarily to get the dimensions of photos online. My portfolio site requires me to use header photos of a particular size, so I measure header photos on my site with Page Ruler and then crop pictures to those dimensions in Photoshop.
To use Page Ruler, simply click the Chrome extension, and drag your mouse to select the item you want to measure.
3. Fontface Ninja
Have you ever wondered what font you favorite website uses? Fontface Ninja can tell you! It's a super handy web font identifier.
Install the tool as a Chrome extension, then click the ninja icon in the top right of your browser to use it. Once open, hover over fonts on the page to identify them. You can also click while hovering to open an interactive window that lets you type with the identified font and experiment with sizing.
4. Eye Dropper
The Eye Dropper tool is another essential tool for all you bloggers out there. This Chrome extension allows you to easily identify the colors on a web page. I use this tool all the time to pull colors I like from websites and add them to my own site or to a print design.
You will want to understand the difference between CMYK, RGB and HEX colors before using this tool. Essentially, RGB and HEX are color codes used primarily online. These color codes tell the CSS code on your website how to display color on your site.
5. Storify
Storify is a great tool for aggregating and displaying social interaction and responses, but it can sometimes be finicky. The search tool within Storify isn't great, and it can be challenging to find the social posts you want to include in a Storify.
Thankfully, the Storify extension tool exists. Installing the Storify extension tool in Chrome adds a little Storify icon to every social post on your feeds. Simply click this icon (likely in the bottom right corner of your social post) to automatically save the post to your Storify account. This button saves you the trouble of searching for an item you want to include in your Storify. This tool will save you time when you need to create a Storify for a class or newsroom.
6. Pocket
As I mentioned earlier, Pocket is my most used Chrome extension (and also web app). Pocket is an easy way to save links you want to read later.
Once you install Pocket on Chrome, you will be prompted to sign up for a free account. A Pocket icon will be added to the bottom right corner of all of your social posts, and to the top right of your web browser. Clicking the icon will automatically save the link you're viewing to Pocket. You can also directly copy links and add them to Pocket by right clicking or opening the Pocket website.
Pocket drastically increases my blogging productivity. Instead of searching through a list of clunky bookmarks, all my links are saved and displayed visually in Pocket. I often store links I want to share or blog about later in Pocket. Pocket also has a great mobile app that syncs all your saved links between your phone and computer.
These are just a few tools to help you with your blog, but there are many more out there. Are there any Chrome tools we missed? Share your favorites in the comments.
No comments:
Post a Comment