Mobile Subdomain vs Responsive Web Design and SEO

Updated May 1st, 2015: Is your site mobile ready? Google’s latest algorithm update rolled out on April 21st targeting business whose websites we’re not mobile friendly. If you haven’t updated your site, you could be losing tons of traffic from mobile search. You can read more about Google’s update here. If you’re not sure if your site is mobile-friendly you can use Google’s handy Mobile-Friendly Test. If you need help getting your site updated and mobile ready let us know, we can help!

One of my many pet peeves as a developer, has to do with the separation of look and feel after viewing a website on both desktop and mobile. After a few dozen visits to a site on a desktop, I have clear idea about what to expect in regards to a site’s look and functionality. Then one day I’m waiting at the dentist, so I decide to check out the website on my phone. The browser loads and to my surprise the site looks completely different than I expected. On the phone I expected it to look relatively similar to the desktop version, so why is it so different?

Why Does the Mobile Site Look So Different?

This is because there’s a 99.9% chance that it really IS a different site. The site is usually located “ (though it can be anything, such as “” or “”) instead of “” and you can see it’s address in the that though websites employing Responsive Web Design can in theory have a completely different aesthetic than the desktop site, and it’s not a requirement that the “m” site look completely different than “www.” However, RWD (responsive web design) sites typically don’t show a large change of aesthetic between screen sizes. It’s just more common with “m” subdomains because they are truly different websites.

What’s So Good About Responsive Web Design?

So when would a company want to use a “m” subdomain? First let’s talk about why you want a RWD website. RWD simply means that you develop websites to display nicely on all devices regardless of screen size. This allows for a continuity between devices, while maintaining consistency between link navigation and style. For us here at ISM, SEO is the most important criteria we consider in making decisions, and responsive web design and SEO seem to go hand in hand. Google also prefers RWD over a “m” web design because it generally provides a more coherent user experience and helps avoid duplicate content issues because of search engines having to crawl 2 different codebases. Google prefers that a site share a single domain and html, and even recommends it to be a web standard. Consistency of look has indirect benefits as well, such as keeping users on your site longer and making it more likely for them to take action, and makes generally makes it easier to share content because of one dedicated link.

Why Would I Want a “m” Subdomain?

So why is this not the case 100% of the time? Why go through the trouble of building a brand new website just for mobile users? Well, the arguments for a “m” site seem to revolve around speed.  It’s true that a website with tailor fit Javascript, CSS, and images, can result in a website that’s fast and streamlined because nothing but what’s essential has been introduced. Another argument is that if you run an old website, especially if it has a large legacy codebase, it can be difficult and expensive to rebuild the code just so it works on mobile devices.

So What Should I Do?

I believe the problem however, can be solved in a trade-off for most websites. Though the argument of legacy code is a tough problem to tackle, requiring more than just development decisions, there are good solutions to help increase mobile speed. Unless you have to develop specifically for older browsers,the push toward a more coherent user experience and a consolidation of resources is obviously a better solution. And again, SEO is an argument that sometimes gets left out among us developer types, but it all goes back to the idea that if no one can find your website, what does it matter?

Can HTML5 Help With Your SEO?

HTML5 has been a growing standard for about 2 years. Although the “5” denotes that this is the fifth official version of HTML, the plan seems to be that it will be an ongoing project, with new features being continually added, and none being taken away. This will tremendously help with any new version headaches in the future. I will cover some easy changes that you can (and should) start implementing right now if you haven’t already, and help increase your SEO.

HTML5 Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

This is the old school, long and complicated way of describing a web page to a web browser. Now we just easily use this instead:

<!DOCTYPE html>

HTML5 File Specification

Instead of having to specify whether our link type is text/css or text/javascript, such as:

<link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
<script type="text/javascript" src="path/to/script.js"></script>

We can simply use:

<link rel="stylesheet" href="path/to/stylesheet.css" />
<script src="path/to/script.js"></script>

HTML5 Semantic Header/Nav/Footer

Google has filed for a patent to make an adjustment to it’s PR algorithm. The change states that the search engine (SE) can adjust the relative importance of a link on any given page. Here is where these new semantic markup tags become invaluable. Before HTML5, we had to build websites using spans and divs. Since these tags don’t necessarily help SE’s fully understand what a block of code is trying to accomplish on a webpage, we can now add a bit of context:

    Header content goes here
    Navigation menu goes here
   Footer content goes here

Links in the header and navigation get a little more of a boost compared to those in the footer. Divs and spans are still in use today of course, but their utility has been slowly diminishing as newer tags continue to be developed.

HTML5 Links

Links also get a bit of an update to help make their targets a little better understood. One of the most popular links is the rel=”author” attributes:

<link rel=”author” href=”″>

This bit of code is supposed to make author’s face show up next to the result description on the page (or author’s pizza, in this case).

HTML5 Forms

Ok, this last one is a little more complex, but super cool as it saves a lot of trouble behind the scenes. This bit of code validates the input field, and makes sure that the email address entered is a real email address:

<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type="email" />
<button type="submit"> Submit Form </button>

For more information on HTML5 and ways you can improve the SEO and indexability of your website, check out these resources:–net-13520

JPEG or PNG? – Increasing Page Speed with Proper Image Formatting

Google looks at how quickly your page loads when its bots are crawling your site. Images and graphics often affect the load speed more than anything else, but learning how to save image files properly can reduce the unnecessary bloating of image-sizes.

There is no reason to blindly throw images into your website without the proper formatting.

Even if you aren’t interested in optimizing your website for search engines, you should do it for the users. No one wants to wait for a website to load. If you reduce your image sizes your visitors will thank you.

PNG Files

Portable Network Graphics is a lossless file format created with the intent to replace the GIF format, due to the patent restrictions of GIF compression. The project was a success and we now have complete access to the format, which is patent-free, has great compression, and is widely supported by web browsers. PNG files are used primarily for transparent images, simple-color images, and images that have hard lines, like text. There are two versions of PNG files: 8-bit PNG(known as PNG-8) and 24-bit PNG(known as PNG-24). PNG-8 is limited to 256 indexed colors, while PNG-24 has millions.

JPEG Files

Joint Photographic Experts Group created a file format, creatively named JPEG \ˈjā-ˌpeg\, to handle complex-color photographic images. When saving a file as a JPEG, users have the choice of quality vs. compression. More compression results in a smaller file size, but you will lose quality. Obviously, less compression results in a larger file-size, but also a higher-quality image. The great thing about JPEG compression is that you can usually find a balance that both looks good and has a small file size. Unfortunately, JPEG files have no transparency. Additionally, the file format is lossy, meaning that it loses some of it’s data each time it is compressed. If you re-save the same image multiple times for some reason, the image quality may be low.

Still need some clarification? Let me clear it up for you.

The file sizes mentioned are for the image in the bottom right of each example.


This simple-color file is saved as a PNG-8. It has a file size of 1.81KB.

Same file saved as a maximum-quality JPEG. It looks the same, but has a file-size of 12.1KB.

Same file saved as a maximum-quality JPEG. It looks the same, but has a file-size of 12.1KB.

Low Quality JPEG | PNG vs JPEG

The JPEG file can be compressed to about the same size as the PNG, but the quality is terrible.

Does that mean PNG is always better than JPEG? No, there is a reason they didn’t name it the “.PERFECT” format.

While we wait for the best format ever to be created, here is an example of when JPEG can be a better choice:



Can you tell a difference between the two sides of the image? I doubt it. The full-size PNG has a file size of 402KB, but the full-sized, compressed JPEG is only 35.7KB.

JPEG works better for this image, because JPEG compression was made for photographic images. The compression still works for simple-color images, but the loss of quality is far more noticeable.

Why Flat Design Works So Well

Have you ever visited a website that makes you leave as soon as you see it? We all have. The scary thing is that your website could be one of them. Many people, especially the newest generation of consumers, are starting to dislike the look and functionality of well-built websites from just a couple years ago. Why? Because there is too much “going on”, making the browsing experience too difficult.

If your website looks dated, then it probably has more issues than just appearance; it probably hasn’t been optimized for mobile devices, for example. Considering that mobile devices make up roughly 30% of web traffic in the U.S., it is generally considered a good idea to make sure your website is accessible to those users. If your website is too difficult for them to use, they will find another. Those people were your potential customers, gone because they didn’t like using your website.

Mobile versions of websites have solved the issue for many people, but they’ve almost worked too well. Websites created for mobile devices are convenient to use, and that is why web viewers are starting to dislike many full-size websites. This has created a new style of web design, called “flat design”.

Google Logo | Flat Logo

Google is a good example of a subtle flat design. Check out their newest logo and website.

This trending style isn’t only a result of personal preferences, though. There are reasons it is so popular this year.

Flat Design is the result of logical choices

Flat websites are easier to use.

Content is blocked out in easily understandable sections. Gradients, shadows, embossed and beveled buttons, and large amounts of text are all “going out-of-style”. “CLICK HERE” buttons, for example, are being replaced with buttons that the user can tell are clickable by their appearance and placement. Convenience for the user is one of the main focus points of the design.

Simple-color images are smaller

Flat Icons | Increasing load speed

These icons load quickly, while remaining visually appealing and recognizable to the user.

The fewer the colors in an image, the smaller the file-size. Huge, high quality images load reasonably quickly on a high-speed connection, but many people don’t have fast connections. Mobile devices often times don’t have enough “service” to take full advantage of their mobile networks, and the “free high-speed wi-fi” options available to travelers is usually mediocre at best. Flat design combined with well-written Sass CSS, could help your website load significantly faster, which increases your favor with Google’s ranking algorithm.

Navigation is difficult on phone and tablets.

Devices that use a touch screen instead of a mouse don’t have the ability to hover, which many websites utilize in their menus. This makes it difficult for mobile users to navigate. Flat design solves this issue by avoiding complex navigation and website “depth”, making the website easily navigatable for both mobile and desktop users.

Large blocks of text aren’t useful.

Flat design uses less text than a run-of-the-mill website, because more isn’t always better. Although plentiful textual information looks good to Google’s bots, your viewers aren’t reading most of it. Studies show that readers scan large amounts of text to find what they are looking for in a pattern that resembles an “F”. The first couple headings are scanned over, then the rest of the content in glanced at vertically in an attempt to find something interesting. Knowing this, your website should deliver what your business has to offer before your viewers get bored with reading about it (it happens fast). Your first two headings (remember that “F” pattern) should display your most important information. Flat design gets rid of the  low-value content to make space for high-value content, or give the design some empty space, or breathing room, if there is “too much going on”. That means you shouldn’t have have more than a couple headings for any subject on a main page.

Flat Design | Flat Website | Responsive Design

No compromises here. SpellTower’s website looks and functions the same across all devices.

Flat Design retains your website appearance across devices.

The blocked out and straight-to-the-point content of a flat design can be scaled easily without losing the core of your website’s design. The result is a website that is visually and functionally similar across all devices, making flat design an appealing choice when developing a “responsive” website.

Of course, flat design isn’t the only way to go. There are many styles of web design that also work well, but flat design solves a lot of problems that are difficult to work around otherwise. Not everyone likes the look or functionality of flat design, but you still need to make sure your website is accessible for everyone. If you have a live website already, try clearing your cache and loading it with you have a slow connection, or navigating through the site with a touch-screen.

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 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;


.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 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;


.nav {
    border: 1px solid yellow;


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);


.article-heading {
    opacity: 0.8;



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


.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.


Is Your Website a Crappy White Van?

How do you know when its time to build a new website?

Lets start by reviewing a few details to determine if you are in Crappy White Van Land.

  • Does your website represent your business as a reputable enterprise and showcase your products or services professionally or does it more or less function as a piece of paper with your name on it and some outdated content?
  • When a customer, with no knowledge of your company, sees your website for the first time is the impression likely positive?
  • Did a friend or family member with an “eye for design” build your site years ago and almost finish the project?
  • If you were looking for your services and came across your site, would you call you?  Be honest.

time for a new website“But I love my crappy white van – it works just fine.”  No…no it doesn’t

Lots of business owners think their crappy white van website is fine…its all they need and they don’t want to rebuild.  Plus, a new van costs money and money doesn’t grow on trees.  Well, lets talk about money:

When you drive a crappy van around town, you are advertising to everyone you see with a message that screams “sketchy and unknown”, and the same is true for an outdated website.  The big difference being: with a website, your potential audience is everyone.  The crappy white van website fails to convey a positive first impression… and you know what they say about first impressions.

So, what’s the value of a customer?  If your white van website is preventing prospects from contacting you it is costing you very real dollars in the form of missed opportunities.  If your outdated site doesn’t brand you as on par with or ahead of your immediate competitors, you are losing business.  How many potential sales or clients are you going to let slip before you commit to trading in the van for a website that reflects your best qualities?

How do I get started with a new website (and say goodbye to my van)?

When you are ready to upgrade you need to work with a skilled web design company that will take the time to understand your unique business objectives. Then work as a team to develop a design that speaks to your business philosophy, promotes your products and services professionally, and is structured with SEO baked into the design to ensure that your new site is visible to your target audience.  So get started today, ditch your crappy van and upgrade to a web site that works for you 24/7 and helps bring in new clients!


Typography That Works With Your Website

When designing a website, there are many components that have to work together to create something that is aesthetically pleasing. High-quality graphics and nice layouts get most of the attention and praise, but there are other factors at work that are equally as important, and shouldn’t be over looked. Typography is one of the elements that is overlooked by most casual internet users until they see something blatantly bad. Typography, in simple terms, is the art of making text appealing to the eye. Although easily overlooked, it actually takes a significant amount of time to get right. Most of the work consists of finding fonts that “look right”. That can be difficult, even if you have artistic talent, but here are some guidelines and tips to help make it easier.

Know When to Use Which Fonts

Unfortunately, we can’t just pick our favorite font and use it for any site. For an attorney’s or law firm’s website, you want to use a font that expresses a sense of formality, professionalism, cleanliness, etc. If someone is looking for a lawyer, they are in a serious mood and want someone who means business; your website has to deliver that sense of security. When it doesn’t, your website turns into a giant sign that says “run away“.

Typography example for Carl's Law Firm

Would you trust Carl with your life? Me neither. Back to Google!

Another example would be the website you have to make for the knitting business your aunt just started. She hand-knits everything herself, so you should use a font with a little decoration, or possibly a “script” font that looks hand-written, for her website. The reason being is — if your products are hand-made, personal, and unique, then your website should reflect some of those elements. The last thing you want to do for this kind of website is use a font that looks industrial, technical, or even too uniform. If the website doesn’t appeal to them, there is a good chance that a new visitor to the website will leave before reading anything you are trying to tell them, even if you stress that everything is hand-knitted in every sentence.  Gap’s website works for Gap because it is a large company that has a large target audience, but it wouldn’t work for your aunt’s knitting website.

Finding one font that works for your website usually isn’t enough, though. Headings and titles should always stand out from the body content, so the reader knows what they are reading. Unfortunately, increasing the weight and size of the header text usually doesn’t make it stand out enough, nor does it look impressive. Instead, in most cases, you should use a different font for the headings, titles, and other important information. Fonts that work well for headings and logos are usually too difficult to read when set as the body text. Generally, a stylish font is good for headings, while a crisp and easy-to-read font is good for body content.

Typography example for a small knitting business.

Pink and blue is normally a bad color combination for fonts, but it could work for a website that is selling knitted clothing. Both are common colors for baby clothing, and they are “fun”– which could relate to the type of consumer you are trying to reach. Otherwise, black or a dark gray is the best choice for font color for light backgrounds. For dark backgrounds, white is a good choice.

Of course, you can’t just pick any two fonts and use them together. They have to compliment each other; modern fonts with modern fonts, traditional fonts with traditional fonts, etc. There are exceptions, where the two fonts have some elements that bring the two together, or have unique qualities that just happen to look good. Be sure to take some time when designing a website, image, presentation, or anything else that has text to find fonts that work well with the other elements of your design– your sharp-eyed readers and viewers will be grateful.

Structured Data for a Smarter Internet

Ever done a search with your favorite search engine and notice that you suddenly have a wealth of information on the results page, and you haven’t even clicked on a link yet! For example if I search for “pizza recipe” in Google, I get this helpful bit of information right here at the top?

google-snippetSuddenly I have a pizza recipe right at my fingertips. The red arrow is showing the cook time (how awesome is that?), the green arrow is providing us with related information, and the blue arrow is of course displaying the author’s info and giving us a chance to read more by them. How does the search engine understand this query? This magic is accomplished by the use of what is called “semantic markup.”

Without getting into too technical of an explanation, basically this is code that’s included inside an HTML document that provides search engines with metadata to extract meaningful information from the resources on your page (images, videos, links, etc). There are a few different markup standards  and some are more compatible with the others than others. While they all are attempting to solve the same problem, namely giving context to web resources, as continues to be developed, much to the chagrin to some in the web community, it may likely grow to have large market acceptance.

There are several different semantic markup standards, but  I’ll briefly describe the most popular and show a piece of each’s markup:

RDFa (Resource Description Framework in Attributes): This was one of the first structured data standards and reached recommendation status in 2008.  RDFa is currently maintained by the W3C and it currently the most widely used.

<body about="">
    <h1>John's Home Page</h1>
    <p>My name is <span property="foaf:nick">John D</span> and I like
      <a href="" rel="foaf:interest"
        xml:lang="de">Einstürzende Neubauten</a>.
      My <span rel="foaf:interest" resource="urn:ISBN:0752820907">favorite
      book is the inspiring <span about="urn:ISBN:0752820907"><cite
      property="dc:title">Weaving the Web</cite> by
      <span property="dc:creator">Tim Berners-Lee</span></span></span>.
  </body> A standard microdata format that was created between the tech giants, Google, Yahoo!, and Microsoft. As mentioned previously it may likely became the industry standard in the future if only because the search engines want to use their own proprietary markup.

<div itemscope itemtype="">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="">
  Director: <span itemprop="name">James Cameron</span> 
(born <time itemprop="birthDate" datetime="1954-08-16">August 16, 1954</time>)
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>

JSON-LD: (JavaScript Object Notation for Linked Data): Also developed by the good folks at W3C. This markup is perfect for REST based web services and unstructured databases. Like the other markup, JSON is very easy for humans to read, but even more so in my opinion because all of the data is entered in block at the top of the HTML file instead of embedding it throughout a document.

** Note ** The original intention for the development JSON-LD was NOT to help create the “semantic web” per se, but to improve the readability of code between web app developers using APIs.

  "@context": "",
  "@id": "",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": ""

Learn More


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.

Top 6 Google Updates that Positively Affect SEO

Google has a way of making SEO companies squirm with new updates and changes to their search algorithms.  This year’s updates have really made an impact on the world of SEO.  However, it’s not what you think.  Any good SEO team that creates great content that is relevant to readers will still have great rankings in Google’s search results.

Google PandaHere are six of the 50 changes that Google made in March that are the most important to SEO and marketing:

  • Update Codename: Blackboard will process autocomplete queries that include math symbols. (+, -, %, $, @, etc.)
  • Update Codename: Prof-2 allows for betting indexing of profile pages from more than 200 social network sites.
  • Update Codename: ShieldsUp allows for better handling of local intent and navigational queries, where it looks as if the user is trying to navigate to a specific site, or within a specific site that is near their current location.
  • Update Codename: Curlup is the big one that has some “black hat SEO companies” shaking.  This allows Google to crawl a webpage and rank a website based on quality, and what it brings to the user, instead of ranking for SEO alone.  This is what I mentioned before, using keywords is still best practice.  However, don’t just shove them into sentences and content that don’t fit.
  • Update Codename: Fibyen improves the algorithm that determines dates for blogs, ensuring that the newest and most relevant results are brought to users.
  • Update Codename: Lice updates the signals that Google uses related to the landing page that quality images are located on.  This means that users will find higher quality images, even if the images are on lower quality pages.

Google’s updates always seem to scare everyone on the web. Though Google isn’t setting us up for a SEOpocolypse, and as long as you have great tactics there’s nothing to worry about.  If you own a business that has a website just make sure that you have a great Atlanta SEO and web development team taking care of your web presence.  This will ensure the best rankings in Google and greater traffic overall.