Sass CSS Can Improve Your Search Engine Rankings

Are you still using straight up old school CSS for your stylesheets? Stop. Right now. Do yourself a favor and take a day to learn about modular CSS, whether it be Sass or Less.

It’s important to keep in mind that we separate style out of the structure for several reasons: to avoid duplication, to make it easier to maintain code, and to have the ability to reuse content with different styles for different purposes. If done correctly, we have smaller file sizes, which leads to faster page loads times, which results in happier users and more favorable search engine rankings. Modular CSS takes this idea and injects it with steroids. Not only does it help keep the website file structure stay as organized and clean as possible, it’s also a super fun to code in.

As mentioned before there are a couple of different languages to accomplish this, however will this article will focus on Sass. While I can’t go very in depth, here are a few general pointers to help you get more bang for your buck.

Nesting

Nesting is without a doubt one of the easiest ways to build a better stylesheet. This bit of Sass code:

.navigation {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    padding: 5px;
    text-decoration: none;
  }
}

Outputs:

.navigation ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.navigation li {
    display: inline-block;
}
.navigation a {
    padding: 5px;
    text-decoration: none;
}

Pretty cool huh? Though this bit of code doesn’t do very much, tied together with the following this can save us a ton of typing.

Variables

Variables are absolute life savers. One of the easiest way to see their power, is to make a color variable:

$primary-color: yellow; 
.nav {
    border: 1px solid $primary-color;
}

Outputs:

.nav {
    border: 1px solid yellow;
}

Mixins

Mixins are personally one of my favorite parts of Sass. Here’s a simple example:

@mixin opacity($opacity) {
    opacity: $opacity;
}
.article-heading {
    @include opacity(0.8);
}

Outputs:

.article-heading {
    opacity: 0.8;
}

Inheritance/Extends

Example:

.navigation {
    color: red;
}
.footer {
    @extends .foo;
}

Outputs:

.navigation, .footer {
    color: red;
}

You can see in Sass that .navigation and .footer are separate, but after we process the code, our CSS is nice and clean because .footer is inheriting the color property. This saves us file size as well as time, because we only have to declare the color element once instead of twice.

This is just the tip of the iceberg of the power of Sass. I may write more articles that go more in depth that are specific to Sass if you guys want. Just let me know in the comments. In the meantime here are a few links to learn more about the topic. Stay Sassy Web Diego.

Resources

https://www.codeschool.com/courses/assembling-sass
http://thesassway.com/
http://alistapart.com/article/getting-started-with-sass

What Will a Website do for My Business?

As a Dawsonville web development company we often get asked, “Why do I need a website for my business? What will it do for me?”  The answer is actually simple, and having a great website is crucial in the expanding world of technology that we live in today.

Your Business Needs a WebsiteSo, what will a website do for your business?

  • When is the last time you looked for a phone number in a printed phone book?  Odds are it’s been a while.  Search engines like Google and Yahoo are now the main vessels of information.  Having a great Dawsonville web development team strategically build and optimize a website for your company will put you at the top of the list when consumers are looking for the products or services that you offer.
  • Once you have a website, it opens a whole new market.  It will allow customers, and potential customers or investors, to learn more about your business via web search.  That said, you can’t just throw together a website and hope for the best.  There is more to it than that.  The site needs to look professional and be optimized for search engines so that your company develops a great web presence.
  • Potential customers are looking for your services or products.  If you don’t have a website, it’s guaranteed that they will find your competitor’s site instead.  Meaning that one of your customers is now lost.
  • Having a great website will allow you to keep customers engaged in your business by allowing you to post new things about your company.  You can let customers know about sales and specials, or that you’re moving or opening a new location.

It is important to remember, however, that having no website at all is better than a poor one.  Make sure you hire a great professional Dawsonville web development team to design and maintain a great web presence for your growing business.  Don’t miss out on another customer.