Blog - Windy City Digital

Your Site Isn’t Mobile Friendly? Google Will Now Penalize You For It

Posted on April 28, 2015
Written by Dan Rogers

Google announced last Tuesday that websites which aren’t mobile friendly will now be penalized. Searches made from mobile devices will lower the rankings of non-friendly sites, and boost the ranking of sites that are mobile optimized.

How does that affect you? Your Google search results are major in helping your site maintain traffic. Now, Google will actively push down websites that aren’t mobile friendly in search results, which will dramatically decrease the amount of traffic you’re receiving. Most websites built before 2014 fall into this category and will begin to see a drop in web traffic and business over the coming months.

Less Traffic = Loss of Business = Loss of $$$

What can you do? First thing you need to do is to make sure your site is (or isn’t) mobile friendly. Luckily, Google created a Mobile-Friendly Test to do so. If your site is not mobile friendly, you can contact Windy City Digital web services to help your website get back on track and avoid any decreased traffic.

For more info, visit windycitydigital.net

Using Nature as Color Scheme Inspiration

Posted on July 21, 2014
Written by Tom Nolan

Choosing the right color scheme is a critical part of any web or graphic project. Color inspiration can be found anywhere around us, but few sources can be as beautiful and effective as those we draw from nature. Even if your project doesn’t relate to nature in any way, you can still harness the amazing colors it has to offer.

We find that the easiest way to generate a color scheme from a picture where the colors accurately compliment each other is by using Adobe Kuler. Kuler is in internet application from Adobe that analyzes an uploaded image and generates a color scheme based on swatches found within the pixels! You can even export the color scheme directly into Adobe software applications if you’re using the desktop version!

Once you’ve launched the web application, simply click the camera icon in the top right corner and browse for your image. Once it has been selected, the program takes care of the rest! If you’re done with your current image, click on it to browse for another one. You can even save color schemes that you have generated!

Below are some of our favorite nature scenes with a five-swatch color scheme extracted out of them. Each picture isolates the swatches and includes the hex-triplet for use in your projects! Let us know which one you like best!

Beach

Beach Color Scheme

Waterfall

Waterfall Color Scheme

Canyon

Canyon Color Scheme

Lake

Lake Color Scheme

Cavern

Cavern Color Scheme

Frozen

Frozen Color Scheme

Awesome Job Titles for Designers, Developers, and More!

Posted on May 30, 2014
Written by Tom Nolan

Awesome Web Design Job Titles

We’re starting to see more and more companies replace traditional job titles with unconventional and off-beat job titles. This new trend seems to be a way of generating interest and adding a unique element to one’s brand. A lot of design and development companies try to instill a sense of fun and creativity in their brand, and these quirky titles are an excellent way to send that message.

We’ve drawn attention to some of these titles that may be more than appropriate for the digital marketing industry. Some imply a leadership position while others are more universal. Check out the list below and build your own awesome job title!

Code Ninja

Instead of opting for the traditional “Full Stack Developer” job title, try changing it up a bit and going with code ninja. I guess you don’t have to wear all black to be considered a ninja!

SEO Guru

Some SEO experts focus on only content others on optimization, but for those who dabble in all aspects of SEO, try going with SEO Guru!

Pixel Pusher

Playing on the phrase “Pencil Pusher,” Pixel Pusher is a fun, unique title for those in the graphic design industry. Great for those who utilize Photoshop, Illustrator and other graphic software packages on a regular basis!

Mediaholic

If your job revolves around social media and you couldn’t get through the day without it, then you may want to dub yourself a mediaholic!

Job Title Suffixes

The following are words or phrases that work very well at the end of a job title!

Suffix	Example
Ninja	Code Ninja
Evangelist	Social Media Evangelist
Sorcerer	Finance Sorcerer
Sorceress	Visual Sorceress
Rockstar	Creative Rockstar
Wizard	Programming Wizard
Tactician	Project Tactician
Overlord	Design Overlord
Guru	SEO Guru
Wingman	Marketing Wingman
Sidekick	Support Sidekick
Apprentice	Development Apprentice

Job Title Prefixes

The following are words and phrases that work well at the beginning of a job title!

Prefix	Example
Ambassador Of	Ambassador of Buzz
Minster of	Minister of Opportunity
Master of	Master of Conversions
Prince of	Prince of Encryption
Princess of	Princess of Creativity

Tell as about your own awesome job title in the comments below!

7 Web Design Craigslist Ad Fails (You won’t believe #7)

Posted on May 18, 2014
Written by Tom Nolan

Web Design Craigslist Ad Fails
I see images like the one above a lot these days, and it’s funny how accurate they really are. It’s pretty simple, if you want something done fast and cheap, you sacrifice quality. If you want quality and cheap, it’s not going to get done very fast, and if you want cheap and fast, the final product is not going to be high quality. That is unless your seeking a web designer on Craigslist. For some reason people assume that since it is Craigslist, they can pretty much ask for all three without any issue! Below are just a few of the ads I’ve seen on Craigslist that are just absolutely hilarious.

1. THE ALL CAPS

While there is nothing directly out of the ordinary with the content of this ad, it’s funny how people believe that if they use all caps it makes their ad stand out more. This one also throws a flag because when you see STUDENTS WELCOME, the client usually has a pretty limited budget!

Craigslist Fails - All Caps

2. The Cheap Template Service

I forgot that since you want a template, all the actual development work is already done! That means you can have an outrageously low budget of $100-$250 for a site similar to one of the largest investment banking companies in the world…

Dirt Cheap Web Templates

3. The Work Before Pay

So, you want me to take the time to create you a mock-up of your site before we have even talked or agreed on any sort of payment or terms…? Yeah, I’ll get right on that…

Work Before Pay

4. The Resume Builder

These are all over the place on Craigslist. We have no money to pay you, but it would be a great experience and something to put on your resume!

The Resume Builder

5. The “Simple” eCommerce Site

I see these a lot on CL. I need a simple website. Yet in the description, the list of features they want go on and on. I’d like a landing page with information…a few products for sale…some tabs or buttons…a few other pages with products for sale….a cart and confirmation page…a checkout and payment page…and a thank you page. Oh, and by the way, I have a very small budget!

Low Budget and Simple Website

6. The Craigslist Budget Work

This CL post doesn’t even try to mask his/her ignorance. They blatantly say that this is Craigslist and if you’re looking for jobs on here, there is no reason for your rate to be $25/hr. I forgot that since it’s Craigslist, it takes all of the skill out of development work, and we need to work for nothing!

Craigslist Budget Work

7. The Trade Secrets

Believe it or not, I’ve seen ads similar to this multiple times. Clients look for “trade secrets” that will help them appear on the front page of Google. Just forget those complex search algorithms that Google and other search engines spend the bulk of their time developing.

Now, don’t get me wrong, I have nothing against Craigslist as a source of finding development work – especially for those just starting out. The issue lies with that fact that the vast majority of people seeking developers on Craigslist expect professional-grade work at minimum wage pricing or less… When I was responding to Craigslist ads before I got rolling, I managed to find a few great clients within the mix, so for the freelancers just getting started, don’t give up!

Create a scaling animation using CSS3

Posted on April 17, 2014
Written by Tom Nolan

CSS3 allows you to create some pretty awesome transitions and animations. This tutorial goes over one CSS3 animation you can create that scales content into view. Below is a live preview of what we will be creating!

Nissan 370z

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

View Details
Add to Cart

HTML Markup

The HTML for this consists of three main parts. The wrapper, the background image, and the content itself. The content is nested in a vertically aligned DIV to ensure that the content always stays in the middle!

<div>
      <div>
      <div>
      <h3>370z</h3>
      <p>Vestibulum luctus laoreet lacus, in viverra metus pharetra sit amet.</p>
      <div>
      <a href="#">View Details</a>
      <a href="#">Add to Cart</a>
      </div>
      </div>
      </div>
      <div><img src="http://bit.ly/1h7GtTh"></div>
    </div>

CSS3 Transformatiom

In order to get this animation to work, we need to create a custom CSS3 keyframe. The code below denotes that we want to scale from 0% to 105% and then back down to 100% to give it a popping effect. The time for the animation will be controlled using CSS in the next section!

@keyframes popout {
    from{transform:scale(0)}
    80%{transform:scale(1.05)}
    to{transform:scale(1)}
  }
  @-webkit-keyframes popout {
    from{-webkit-transform:scale(0)}
    80%{-webkit-transform:scale(1.05)}
    to{-webkit-transform:scale(1)}
  }

CSS Styling

The CSS for the design is outlined below. The most important one to note is when you hover over the product, we call our popout transformation and then state that we want the animation to occur in .3 seconds!

.product {
    width:25%;
    padding:0;
    margin:0;
    float:left;
    position:relative;
    font-family:Arial, Helvetica, sans-serif;
  }
  .product img {
    width:100%;
    display:block;
  }
  .prod-info {
    position:absolute;
    background:rgba(255,255,255,.8);
    height:100%;
    text-align:center;
    padding:0px 15px;
    opacity:0;
  }
  .prod-info:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.25em;
  }
  .info-valign {
    display: inline-block;
    vertical-align: middle;
  }
  .prod-info h3 {
    font-size:24px;
    font-weight:500;
    margin:0;
    margin-bottom:10px;
  }
  .prod-info p {
    font-size:18px;
    line-height:24px;
    margin:0 0 30px;
  }
  .product:hover .prod-info {
    animation: popout .3s ease;
    -webkit-animation: popout .3s ease;
    opacity:1;
  }
  .product .btns a {
    border:solid 1px #666;
    border-radius:3px;
    color:#666;
    text-decoration:none;
    padding:10px 18px;
    margin:0 5px;
    cursor:pointer;
    font-size:12px;
    text-transform:uppercase;
  }
  .product .btns a:hover {
    background:#666;
    color:#fff;
  }

A Better Way to Prevent Form Spam!

Posted on February 15, 2014
Written by Tom Nolan

Captcha Image Frustration

We’ve all seen the Captcha forms and math problems that help prevent spam form submissions. Since form bots arbitrarily enter information and then attempt to submit the form, they are stopped in their tracks when the data they enter doesn’t match.

The problem with those methods is they add an additional step for a REAL user. Now you’re probably thinking big deal…it’s just one step. But, what happens when your user gets frustrated when their entry doesn’t match up with the Captcha image or they can’t decipher the Captcha image themselves…we’ve all been there, and chances are they’re going to give up and move elsewhere. Don’t lose a possible conversion because of a simple reason like that. With this simple, yet effective, method by Windy City Digital, you can combat spam without compromising conversions.

The Hidden Validation Input Method

The reason this method works so well is it uses the form bot’s main function against them. All form bots insert random information into ALL form fields and then submit. Our forms have one additional input field that needs to be left blank in order for the form to be submitted. That way when the bots are running through doing their thing, it won’t submit because they inserted information into the blank validation input field.

So now, you’re probably thinking that this method still has an additional step. What makes us different is that we hide the validation input field from the front-end, so THE USER NEVER SEES IT. This way all the user needs to enter is the required information and BAM, message sent and no additional steps necessary. At the same time, the bot gets fooled.

Spam Free Contact Form

To make your life easier, Windy City Digital developed a free anti-spam contact form generator. You can customize and download your very own spam-free contact form by utilizing our simple form generator.

WCD Blog

Stay up to date on all things digital