This post goes out to all the non-developer people out there.
Are you still a little uncomfortable around your developers? Is it because you don't feel like you know enough about the web / websites / code? I may be able to help you with that.
If you aren't already, you need to get comfortable with this little thing called "Inspector." Sometimes it's called "Developer Tools" or "Web Inspector." The name may change, but the general idea stays the same for pretty much every browser; well, except Internet Explorer. Don't try anything you're about to see or read in Internet Explorer until you're emotionally ready to deal with that roller coaster.
What is Inspector?
Basically, Inspector let's you figure out what's wrong with a web page; whether it's a styling problem (HTML / CSS) or a functional problem (JavaScript or other browser errors). The best way to explain it is to show you. Hit F12 if you're in Chrome, or Shift + Ctrl + I if you're in Firefox. Here's how it should look:
Google Chrome's Inspector
Firefox's Inspector
Why should I use it?
Let's say you were managing a project and your client wanted to know if some minor styling changes were possible. You could go disrupt your developer(s) about it, but what if you could find out for yourself in 10 seconds? That'd be pretty neat, huh?
Fire up inspector in your browser, right now. Let's use a totally hypothetical scenario, that no one has ever experienced (wink). Let's say this was your client's website, and they said something along the lines of:
"I like it.. but what if instead of black it was purple, and instead of grey it was bright yellow? I like yellow, and my dog's favorite color is purple." -- Your Most Favorite Client Ever
Before I show you how, try it yourself without reading on for the answer.
So now, let's walk through the process of changing the background color of this site using Google Chrome's inspector. Here are a couple screenshots that illustrate the two key areas of Inspector that you will be using to accomplish this:
The HTML of the page that you're looking at
Where you manipulate the styles of the page
In the HTML area of inspector, left click on the body element, if it is not already selected. In the styles area, find the place where you see the following:
background: #000;#000 is hexadecimal color notation for black. Here's a fun little web-based tool for picking out hexadecimal colors.
Now back in the styles area, left click the hexadecimal color. The text should become editable. Change the background color to purple. The line should look like this:
background: purple;Note that if you ever make a change that is not valid, the CSS "rule" will be crossed out.
If you made the change correctly, you should end with something like this:
And this is probably the point at which you talk the client back from the precipice of a not-so-good decision like using purple as a background color.
Wrap Up
Inspector can be a powerful tool. Styling changes are really a fraction of what I, and likely your developer(s), use it for. But I hope at least now I've opened up a window into a new world of possibilities for you.
