CSS Selectors Are fun

From my title, you may think I’m being sarcastic but I’m really not.  CSS selectors can be frustrating sometimes and when we don’t understand them but when we understand the power of them is really very impressive!  Some of things you can do with them border on Javascript like. (oooOOOOO).

Basic selectors

This part is pretty easy.  A “.” represents a class, no dot and you’re selecting just the element.  You can see it reflected in the Codepen below.  Isn’t pizza delicious?  You can also select with ids (“#”) but it’s generally seen as bad practice to use IDs as selectors in CSS.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”rVKdbG” default_tab=”html” user=”Fixyourcss”]See the Pen <a href=’http://codepen.io/Fixyourcss/pen/rVKdbG/’>rVKdbG</a> by Jordan Hansen (<a href=’http://codepen.io/Fixyourcss’>@Fixyourcss</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

CSS stands for “Cascading Style Sheets” which means the styles apply top to bottom (this goes for css files as well).  It is, however, interesting to note that there are exceptions to this rule based on specificity.  Selecting a class has more precedence than selecting just an element (otherwise the .sword would be overwritten by the div selector) because it is more specific than just the element selector.  There is an “!important” command, which allows you to overwrite anything (except another !important tag that is lower in the Cascade).  You generally want to avoid using this.  CSS tricks has written an article about when it’s okay to use !important and it’s worth reading.

Here at Fixyourcss, we generally don’t have access to all or any of the code.  It also can get very messy and we don’t know what file is doing what and what is being loaded in what order and if there is maybe some javascript applying some css styles.  So, that’s when we bust out the !important tag.

Advanced (read fun) selectors

These CSS selectors are really powerful.  Take a look below.  We can make active things change with “:hover” (this can also be used for :active, :focus, and :visited).  We can select children by placing a space between selectors, with it going from parent to child from left to right.  Want to only select an element with two specific selectors?  Just put them right next to each other, like “.spanContainer.secondContainer”.

And this little nuget that I think is pretty great!  At the very least it’s kind of helpful when you’re trying to figure out what styles are applying to what.  A selector like “.spanContainer:hover span” will make it so that when the parent is hovered over, the child span will receive the styles you want to apply to it!  Not knowing this (like I didn’t for a long time!) can make for some confusing times when you’re trying to figure out why the style isn’t being shown on the element that you are hovering over!

 [codepen_embed height="268" theme_id="0" slug_hash="MwXGWo" default_tab="result" user="Fixyourcss"]See the Pen <a href='http://codepen.io/Fixyourcss/pen/MwXGWo/'>MwXGWo</a> by Jordan Hansen (<a href='http://codepen.io/Fixyourcss'>@Fixyourcss</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]

The moral of all this is that you can do a LOT with CSS selectors.  They allow to easily touch any element in your page and apply the necessary styles.  Get used to them and use them!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

CSS Frameworks and why you (and everyone!) should use them

CSS frameworks are amazing.  Even if you are one who shuns the use of a template for your web page, I really don’t feel that there is any reason a framework should be not be used in pretty much every web project.  They offer so much with so little cost.  Here’s a list you should take a gander at if you’re not sure which one to use.  I personally use bootstrap for all of my projects.

Responsive

Having a responsive website has been important for the last few years but since Google’s change to actually boost the ranking of mobile-friendly sites (aka punish non mobile-friendly sites), it’s essential if you care about ranking at all.  Looking at the list I provided above, the first nine frameworks include responsive support.  That means by default your site will scale based on the media consuming it.

This is amazing.  You don’t even really have to think about it anymore.  You don’t have to hand craft your media queries for each possible outcome and test them all.  You can feel safe knowing that they have all already been tested and provide a great mobile experience right out of the box.

No need to reinvent the wheel

Need a modal?  How about a popover?  Tabs?  Accordions?  The modern frameworks have you covered.  Just include the js and css files, apply the classes to your elements and BAM you are set.

Have a situation that is a little trickier?  It’s likely that it’s been done already with the more popular frameworks (Bootstrap).  I like to use a site called Bootsnipp.  It has snippets that others have produced for their issues.  Things such as a custom login/registration, profile pictures, pricing tables, and spinning social icons.  It’s well worth checking out as it can save you a lot of time and headache.

Even if you can’t find what you need from Bootsnipp or the standard framework, using something like this allows you to reach out to the communities behind them and ask for help.  The tag “twitter-bootstrap” alone has 46,246 questions on Stackoverflow.  Lots of people will be there to help and easily understand your problem when you use a popular framework.

CSS Frameworks have great implementation and documentation

Like I said, I typically use Twitter’s bootstrap and the documentation they provide is amazing.  Just include the css and js files and you can lean on any of their classes.  The documentation they provide it outstanding, complete with code snippets that you can just copy and paste into your page.

Using CSS frameworks will make the front end CSS side of your project so much easier and I highly encourage.  There are a lot of great, open-source solutions that are worth using.

Have a framework that you love?  Have a reason to hate CSS frameworks?  Please drop a comment below and let me know!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

 

The value of your marketing efforts

love_money

Tracking things is important!  As I was meeting with a client last week and explaining to him a way to value each lead it dawned on me that my accounting degree is actually incredibly helpful for digital marketing.  If you can find out the value of each visit, click, and action, then you can easily decide how much it’s worth to pay for that action.

Let’s go over a quick formula to help you find the value of your marketing efforts.

Value of each event

This formula is pretty simple in practice but there are a few different ways you can do it.  For this example we’re going to try and track visitors.  We’ll start simply with profit / visitors, where the item can be anything from a product or a large contract.  So if we are receiving $200,000 profit in a time period and we have 50,000 visitors, then the value of each visitor is $4.

So, why is this important?  Because it means if every visitor is worth $4, then you can safely spend $3.99 for each visitor!  Most of the time I tell a client this, they’re like…but then I only make $.01 per visitor!  While this is true, with the numbers this formula is giving us we can spend $3.99 a billion times and still make $.01 per visitor.  I’ll take a billion pennies any day.  Of course it’s not likely that you’ll have a billion visitors and so you need to keep checking this formula and following the value of each customer and spending accordingly.

Moral:  Check the numbers from this formula often.  The more it’s used, the more accurately you’ll be able to find the value of your marketing.

Not all visitors are created equalvalue_of_sources

It’s VERY important to note that the above formula is super broad and really should not be implemented without being more specific.  Let’s look at the above picture taken from Google Analytics and make some assumptions.  We’ll assume that $57,069 is our profit (ha).  With these numbers, we can easily see that the value of each session is $3.50 (57069 / 16312).  That means it’s an okay idea to spend $3.49 or less on advertising to secure a session, right?

Probably not.  Look at the facebook referrals and assume they are actually ads.  For this segment, for each facebook visitor is only worth $2.41.  If we don’t look at the individual segments and know what is driving each, then we could be making a very bad error.  Paying over $2.40 per facebook visitor will result in a lot of pain as long as these numbers hold true.

For things that drive organic, google traffic (blogging or whatever magic you are doing) it’s worth it to spend $3.48 for each increased visitor.  There are a lot of other metrics for this that you can and should track (you set up goals already, right?), like how many visitors each blog post brings in and how many of them are converting to sales but with that simple formula, profit / #ofevents, you can really get a better feel of what is okay to spend on marketing.

Worthy mentions

It’s also worth mentioning that profit has several definitions.  The easiest way to track it is profit per item or profit per contract or whatever.  But you really should also take into account overhead into this as well.  Rent and other fixed costs should be accounted for to make sure you are using an accurate number for profit.  When in doubt, be conservative.  You don’t want to find out that you’ve been spending too much on marketing and that each visitor has actually been a loss.

Have some cool tricks to track and evaluate the value of your customers?  Please feel free to mention them in the comments below!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.

 

Why developer tools are awesome for doing CSS

I feel that for anyone doing serious CSS, using developer tools make it sooo much easier.  I’m going to talk about Chrome’s tools today because that is what I use but I believe both Firefox and Safari have strong tool kits when it comes to dev tools.

You can see the changes right thene!

It’s amazing.  This is something probably most pick up (hopefully) pretty soon after they start developing.  You don’t have to ctrl + s and then refresh over and over, testing the different changes.  Let’s go ahead and make those changes in the browser and watch it happen!

Let’s try this in action.  My example is going to be from a gdetach_toolsreat place to go for help – stackoverflow.  Hit F12 to open your developer tools and then you can start making CSS changes right then.  I like to detach my tools and put them on a separate monitor (see screen shot) but you certainly don’t have to.  Just click, hold, and select the bottom option to detach.

SO_top

Now, those buttons look pretty nice but let’s say I want to make them a bit bigger.  From your developer tools you need to find those elements.devtools_mag_glass  There are several ways you can do this. I typically just right click and say “inspect element”. This will jump your dev tools right to the element you’re looking for.  Sometimes it’s trickier than that, so you can also use the magnifying glass to find any element in the page.

See all those styles on the site?  All of those can be changed on the fly.  Each time you change them, you see how it looks reflected immediately in the browser.  So, try increasing the font-size and see if that does what you want.  No?  Okay, adjust the padding.  Got it?  Good.  Now either find those selectors in your CSS code and adjust them accordingly or ghetto it out and use those selectors and overwrite the previous CSS. dev_tools_styles

#hmenus .nav ul li a {
padding: 4px 10px 5px;
font-size: 25px;
line-height: 1.3;
color: #fff;
background: #858d93;
-webkit-transition: background, 0.15s, ease;
-moz-transition: background, 0.15s, ease;
-ms-transition: background, 0.15s, ease;
-o-transition: background, 0.15s, ease;
}

Adjusted the font up to 25px.

Computed Styles

When you are going back and working on someone else’s stuff (every day life here at FixYourCSS), it’s pretty common to not know why the styles are acting the way they are.  It can be tricky digging through all the layers to see what is and what isn’t responsible so dev tools has another awesome help for this.

If you look at the picture above, you can see we are in the “Styles” tab of the tools.  Right next to it you can also see a “Computed” tab.  This displays all the active styles being applied to the selected element.  You can also click on the magnifying glass next to the style and it will quickly take you to the style under the “Styles” tab, where you can edit it and find the location of it in your style sheet.

Bonus

Under the “Styles” tab there are some other goodies that are dev_tools_goodiesworth mentioning.  They live in the top right hand corner, as seen in the picture here.  The plus button will add a completely new style, including a new selector.  The next one is how you test your CSS element state (hover, active, focus).

I really LOVE working in developer tools.  It allows such freedom to be able to play and see how things look immediately.  It’s such a powerful too and I feel that ANY developer (especially front end) needs to be using them.

Have some great developer tips to add?  Please feel free to contact us or leave a comment below!  We’d love to have your input!

This MailChimp shortcode is now deprecated. Please insert the new shortcode to display this form.