One year after Google Maps API pricing changes took effect, how are website developers and owners faring? What difficulties are we facing and what workarounds exist? In this post I’ll breakdown some of the confusion and explain how to install a free Embedded Google Map as well as how to create a new Google Maps API Key.

Back-story

In the summer of 2018 Google sent shockwaves through the online developer community after announcing that the company would charge for use of its mapping APIs–tools developers use to build programs.

Google began charging developers for every call their app or website made to Google’s Maps API server. That means that every time a user loads a webpage or an app displaying a Google Map using an API key, Google charges the owner of that API key.

This caused a lot of confusion and consternation. Developers were less than enthused; until then, most uses of Google’s APIs fell under a development license that was free for up to 25,000 map views per day. Numerous apps and websites had been developed under the assumption that access to these APIs would remain inexpensive. Now suddenly there were fees. Steep fees. In some cases, a roughly 1400% increase in fees.

Google’s New Maps API Pricing

SKU	$200 monthly credit Equivalent free usage	Monthly volume range (Price per thousand)
		0—100,000	100,001-500,000	500,001+
Mobile Native Static Maps	Unlimited loads	$0.00	$0.00	Contact Sales for volume discounts.
Mobile Native Dynamic Maps	Unlimited loads	$0.00	$0.00
Embed	Unlimited loads	$0.00	$0.00
Embed Advanced	Up to 14,000 loads	$14.00	$11.20
Static Maps	Up to 100,000 loads	$2.00	$1.60
Dynamic Maps	Up to 28,000 loads	$7.00	$5.60
Static Street View	Up to 28,000 panos	$7.00	$5.60
Dynamic Street View	Up to 14,000 panos	$14.00	$11.20

^{View Source}

The new pricing offers a $200 per month credit to every API key. Looking at the table above, you see that a heavily trafficked site, especially one containing a map on a frequented page, will run-up charges quickly.

However, you may also notice the top three line-items in the table:

• Mobile Native Static Maps
• Mobile Native Dynamic Maps
• Embed

These all remain free under 500,000 calls per month. Yep, that’s right. Free.

There was a lot of confusion centered around the pricing of these three items. The first two have to do with using Maps for mobile app development. The third item above, embed, is the most pertinent to us at Big Boom Design. Because we focus on building small business websites, the free embed option is a great choice for many of our clients who simply need to display a single location.

Embed a Free Google Map

The Embed Map option is great for websites that don’t require customized map views, multiple location plotting, or directional services. If you or your client simply need a map with one location marker, this option is for you.

7 Easy Steps for Embedding a Google Map

Share a Map

Map Embed Options

1. Point your browser to Google Maps.
2. Enter the street address you wish to display and plot it on the map.
3. Click the Share button.
4. Select Embed a map at the top of the Share dialog.
5. You can select what size you’d like your map to be in the top left.
6. Once you’re satisfied with the look, copy the <iframe> html that is generated.
7. Finally, paste the <iframe> wherever you like on your site. Ex: footer, contact page, about page, etc.

Great you’re done. No fuss. No charges. It’s that easy.

Create a Google Maps API Key

For developers who’ve created apps or websites that require custom views, multiple location plotting, or one of the other paid-per-use services, you’ll still need an API key and you’re now subject to the pricing listed in the table above. Follow the steps below to create an API key and apply it to your website.

1. Login to a Google account you wish to associate your API key with. Once logged in visit the Google Developers Console.
2. Select Create a project from the dropdown and click continue.
3. On the next screen you’ll be asked to name your project. We recommend using the name of your website.
4. Scroll to Key restrictions > Application restrictions and select HTTP referrers (websites). Under Accept requests from these HTTP referrers (web sites) follow the instructions to enter your website’s domain. If you wish to include all subdomains, precede the domain by an asterisk. Ex: *.mywebsite.com. Be sure to include the trailing asterisk—doing this will include all subpages of your website.
5. Select API restrictions. Here you will restrict which Google APIs can be called from your website. At Big Boom Design we usually use Geocoding API and Maps JavaScript API. Once you’ve made your selection, click the Create button.
6. You’ll be taken to your APIs credentials page and a pop-up will display your new project’s API key. Copy the key and add it to your project as needed.

A Handful Helpful Tips

To wrap-up here are a few helpful tips for developers and site owners faced with paying higher prices for map services:

• If you need to reference map data on multiple pages consider replacing your map with a link to an AJAX pop-up or a separate page containing a map. This way the map data will only be called if a user intentionally requests the data by clicking a link.
• Remove maps from footers and other global elements that load on every page, or only use free embedded maps for these purposes.
• Review your mapping requirements and decide if your project truly relies on use of Google Maps APIs. Often, projects only require a basic embedded map.

The post Google Maps API Pricing and Options appeared first on Big Boom Design.

Once again, I’m writing this from our office in West Asheville. The rain has made a quiet, productive atmosphere today, I’m hearing a lot of quiet clicking and key tapping. But the excitement is building. We’re only two days out from WordCamp Asheville 2019!

We are so pleased to be Gold Sponsors of WordCamp Asheville for two years in a row. Boomer, a founding organizer, has been an avid supporter of the local WordPress community for many years and we’re happy to be involved in WordCamp at nearly every level.

Some of us are volunteering at Precamp, the day-long WordPress bootcamp Boomer’s leading on Friday. I’m speaking Saturday afternoon about project management on the cheap. We’ll be hanging around the booth Saturday and Sunday, stop by and say hello or meet more of the team. Make sure you pick up some new swag or challenge us to a holodeck battle–er, vintage console video game.

On the Theme

It’s especially significant to me to be speaking at WordCamp this year because of the Star Trek theme. I’m a pretty casual fan myself, but my grandmother was an avid watcher of all the shows. She inducted all her kids and grandkids into not just science fiction television, but also scifi literature and a general interest in space, along with my engineer grandpa.

Whenever I stayed over at their house, the evening’s activity was always watching whatever new or syndicated episodes were on. My grandpa would highlight them in the TV Guide for her every week. I’d often go to sleep still hearing the sounds of tense bridge-decision-making or away-team-adventuring. My mom took me to a Trekkie convention when I was little–it’s one of my earliest memories. Some Klingon cosplayers scared me in the cafeteria, albeit not intentionally.

When I saw the WordCamp theme for this year, it made me think not only about my own family history, but also how grateful I am that the WordPress “Federation” exists. All the people making WordPress better, more usable, and showing us the ropes, making it possible to be hands-on with technology that not everyone would be able to access if WordPress or its community didn’t exist. So live long and prosper, WordPress contributors, teachers, and users! It’s going to be a great WordCamp and I hope I see you there.

The post WordCamp Asheville 2019! appeared first on Big Boom Design.

SOOOOO Much Data in Google Analytics

One problem with Google Analytics is that it collects SO MUCH DATA. How do you quickly drill down to identify the important information and not get lost in all the superfluous data? First, I’ll explain how to get to the Organic Keyword section inside of Google Analytics and I’ll follow up with a few tweaks you can make in order to sort the data to be a bit more useful.

• Log Into Google Analytics here: https://analytics.google.com If you have multiple accounts you might need to select the correct Analytic Property from the drop-down at the top left.
  
• Drill down using the vertical menu on the left of the screen to get to Acquisition – All Traffic – Channels. You should now be looking at a list of all the “Channels” that drive traffic to your website. You’ll probably see a list like: Organic Search, Direct, Referral, Social, etc
• Select Organic Search to view all the keywords that have driven traffic to your site. One thing you might notice is (Not Provided) towards the top of the list. This will be talked about in a follow up blog post.
• Now for the magic step. Click on the heading “Avg. Session Duration” to sort based on how long people stay on your website from each keyword.

By default, Google Analytics organizes the list of keywords based on total number of clicks but this gives us a list based on quantity, not quality. What we are interested in finding is a list of all the quality keywords (Long-Tail-Terms). A quick way to determine a quality keyword is to figure out how much time a person spent on your website. Also, users that stay a long time typically look at a lot of pages.

By looking at the keyword list this way we are able to quickly identify the long-tail-terms and with this information we can do a few things to help increase traffic to our sites.

Long Tail Terms help us identify the following:

• Topics that we should write blog posts about
• Frequently Asked Questions or FAQ’s
• Common misspellings of our business name, products and services
• Keywords that we should work into our website content
• Keywords that we should work into our image names

If you’re interested in learning more about Long Tail Terms, Google Analytics or any of the other services that we offer, jump over to our contact page and get in touch. 

The post How to quickly find your Long Tail Terms appeared first on Big Boom Design.

I’m writing this from our office in West Asheville. A couple miles away, Boomer’s in a room on the A-B Tech campus with all the folks who signed up for Pre-Camp, giving a crash course on building a WordPress website.

We are so pleased to be Gold Sponsors of WordCamp Asheville this year. It means a lot to us that the WordPress community in Asheville is so vibrant–WordCamp Asheville is always a lot of fun on top of all the new things we learn about WordPress and websites every year.

This year, make sure you stop by the Big Boom Design booth to try your hand at some vintage video games (did the WordCamp theme finally catch up with our fav booth activity??) and take a stab at winning a gift certificate to a local hotspot.

We’ve also got a couple of our staff sharing their expertise in sessions on both Saturday and Sunday, myself included! There’s so much happening, and it’s sure to be quite a time.

Anyway, I’ve got to wrap this up before my laptop dies–FYI we’ll have some chargers and charging cables available for you to use while you swing on 8-bit vines or challenge Boomer to a round of Smash Brothers. It’s going to be a great WordCamp and I hope I see you there!

The post WordCamp Asheville 2018! appeared first on Big Boom Design.

It’s true that some enterprise-level websites are so fast that they literally push the limits of the laws of physics. But for the rest of us who don’t have an enterprise-level operating budget, there are still plenty of effective and affordable ways to a faster-loading WordPress website.

The 2017 solar eclipse, seen from just outside Greenville, SC.

In this article, we’ll look at some tools that you and/or your web developer can utilize to speed up your site without breaking the bank.

Ground Control to Major SEO

Every time a visitor loads a page on your website, the data gets prepared by a computer (called a server) that is operated by your hosting company. For the purposes of illustration, let’s call this “Mission Control” and let’s suppose that it’s located in Houston, TX. Once the website data is prepared by Mission Control, it then has to take a voyage from Houston to wherever the visitor is physically located (let’s say Asheville, NC).

As you can see from the example, there are two key things happening when you get a page view on your site:

1) Your hosting company’s computer (or server) generates the data
2) Your site’s data makes a trip (possibly across the world) to reach the visitor’s computer

Decreasing the time it takes to complete either of these tasks will be a big win for you and your visitors. However, for almost all sites, the larger factor in page load time (by a wide margin) is the amount of time it takes for the hosting company’s server to generate the data.

Because of the above, investing in a solid hosting plan is the number one thing that can improve website speed for the majority of site owners.

Build your launchpad by investing in a solid hosting plan.

If you have shopped around and compared hosting companies, you may have noticed that some plans can go for as little as five dollars per month, while other plans have heftier prices into the hundreds of dollars per month.

You can bet that the cheaper “shared hosting” accounts are all going to be limited in their ability to deliver your site quickly. More than likely, a cheap price means you are renting space on a server that is playing the “Mission Control” role for more sites at once than you’d like to think about.

Some hosts that we use frequently at Big Boom Design are SiteGround and WP Engine. There are 1000’s of hosts to choose from, so make sure to let us know if you have questions about your hosting plan or are interested in an upgrade.

Another concern with low-cost shared hosting is security. Unfortunately, security issues can sometimes spread across accounts with shared hosting. Since you have no control over which sites you actually share server space with, you have a giant blind spot in the security of your site.

While the solution in this case is to invest in better hosting, even sites with premium hosting can benefit from the improved security that SSL certificates offer.

Be secure in your orbit — protect your domain with SSL.

Using SSL on your site to make it available via the https protocol is a really good idea. In fact, it’s pretty much a no-brainer once you know the benefits it provides.

The purpose of an SSL certificate is to encrypt the data being sent to and from your site. What you may not know, though, is that SSL also helps with page load time on your site and even gives your site’s Google ranking a boost.

As if the above weren’t reason enough, SSL will likely be a basic requirement in the not-so-distant future. So there really is no reason not to start using SSL on your site today.

Like hosting, there are lots of options out there for purchasing SSL certificates. Let us know if you are thinking about securing your site with SSL, and we’ll be glad to give you some options that we use frequently.

Watch the payload! Use images wisely.

Are you sure you need that eleventh slider image on your home page? While this is (hopefully) an obvious exaggeration, you might be surprised at the effect that images are currently having on your page load time.

Images are one of the best ways to make our sites more interesting, eye-catching, and appealing to users. Unfortunately, they are also typically the most time-consuming asset loaded by web pages. Thus, the key is to be conservative with image use and not to overdo it.

There are several techniques that can optimize the images used on your site, including compression and proper scaling. Another extremely helpful technique (which is now implemented by WordPress sites) is to deliver responsive images to your visitors. This means that a visitor browsing on a mobile device, for example, will be served smaller images, sized appropriately for their device. As a result, they won’t need to load the larger images that may be in use for visitors browsing on desktops or laptops.

Overall, images are just plain slow to load, so we should always think hard about which images need to be used on any given webpage. That said, there is one technique that can (in a way) give us the best of both worlds.

When we use a Content Delivery Network, we gain the ability to remove the heavy footprint of images (and other files) from our server altogether and offload the work to a third party. This doesn’t mean that images are no longer a concern, but it does mean that they will load significantly faster.

Find out more about optimizing images in WordPress.

Extend your galactic empire with a content delivery network (CDN).

One of the most effective and most affordable boosts to your website speed is to purchase a Content Delivery Network (CDN) plan. The idea is that instead of relying on a single host location, you are leveraging an existing network that can deliver content from many possible locations across the country or globe. This way, each and every visitor to your site gets the data delivered to them from the closest possible source.

Sounds complicated to set up, right? Believe it or not, CDN services are very straightforward to sign up for and start using on your site. A few examples of affordable CDN’s are Amazon Cloudfront, MaxCDN, and Rackspace CDN.

Besides the improved performance we get by having multiple server locations, another advantage is that CDN’s are typically much faster than traditional web servers at generating images and other types of files used on your site. In short, CDN’s allow your host’s server to focus on the task of generating your bare bones website framework as fast as possible, while the time-consuming overhead of images and other files is completely offloaded to a third party service.

Caching is your slingshot around the sun.

Caching is the most difficult concept to understand on our list. On the most basic level, it is a way to help prevent your server from repeating tasks that it has recently done. While caching has intricacies that can vary from site to site, when it comes to WordPress there are a wide variety of plugins that can help. Most likely, using a correctly-configured caching plugin can immediately make your pages load faster.

Two effective and totally free caching plugins for WordPress are WP Super Cache and W3 Total Cache. In both cases, you may see unexpected behaviors such as changes on your site not taking effect immediately or caching not working when you are logged in. Most likely, you’ll need to tweak the plugin options to suit your needs. Also, your ability to use caching to its full extent will be affected by the type of hosting account you have.

Besides using a caching plugin as a “blanket approach,” there are also ways to customize the caching on your site by working with the WordPress Object Cache. This is an advanced topic outside the scope of this article, but if you have a slow site with a lot of custom data then you could probably benefit from having your developer utilize the WP Object Cache on your site.

Conclusion

Hopefully, you now have some insight into what may be slowing down your site, as well as what you or your web developer can do to speed things up.

To recap, the tools we’ve discussed to speed up your page load time are:

• Invest in a solid hosting account
• Install an SSL certificate for your domain
• Be mindful of images
• Use a Content Delivery Network (CDN)
• Use caching

Please get in touch with us if you’d like help reviewing your current page load time and putting together a plan to implement the above tools to speed up your site. You probably won’t end up pushing the limits of the laws of physics, but you can surely speed up your site in an affordable manner by using one or more of these methods.

Check out our other posts for more SEO and Analytics tips and tricks.

Find out more about author and BBD lead developer Michael Hull and the rest of the team.

The post 6 Ways to Speed Up Your WordPress Site Today appeared first on Big Boom Design.

Avoid embedding text into images

Can’t load a photo on a slow connection? Can’t read the text it shows.

Browsers and search engines can’t read a picture of text. Not sure what that means? Try to highlight the text in the photo above. You can’t, because while editing the photo, I typed in some words and saved the whole thing as a JPG.

Whenever possible, avoid putting your most important message directly into an image. This way, you’ll get that message to a much wider audience.

Give images informative filenames

Image00001.jpg. Need to know anything else?

When you take a photo, your camera has no way of knowing what the contents of that photo are (stupid camera). So, the camera does the only thing it can. It assigns a generic filename to the image according to some predefined internal naming system. Take a moment to run a Google image search for image001 or DCMIMAGE4 and you’ll find a wasteland of unrelated images that are all but lost to search engines. This is where your site’s images are likely to show up if you don’t name them properly.

Thankfully, this is an easy thing to do. If your image is of the black 2007 Honda Civic Coupe you have for sale, you wouldn’t name it “20160425_092402.jpg”. Instead, you might name it “2007-Honda-Civic-Coupe-Black-For-Sale.jpg”. Be sure to put your main keyword at the beginning of the file name. Try to think about what terms your audience might search for that would lead them to your content and name your images accordingly.

Make use of image alt text

The alt (or alternative) text of an image is the text displayed instead of the image when that image can’t be loaded by your browser or if the user has chosen to disable images. The alt text is also used by screen readers to allow the visually impaired access to that content. Without it, user who can’t see your image might miss out on the message you’re trying to convey.

Like the filename, the alt text needs to be descriptive. In the case of our car for sale, the alt text might read “Black 2007 Honda Civic Coupe For Sale”. What the alt text should not be is a repository for every keyword your can think of. Gone are the days when padding your images with long strings of keywords would garner you more traffic. The algorithms used by today’s  search engines reward quality of content over this sort of SEO trickery and your site may get categorized as spam.

Pair images with appropriate content

Make sure your image is relevant to the surrounding content. For instance, if our car image was placed in an article about the cleanliness of parking lots, the filename and alt text we set earlier might confuse search engines, causing your content to be deemed less relevant. Also, when possible, place your image near the appropriate content to make it easier for search engines to connect the two.

Specify width and height for all images

If a browser knows the dimensions of an image, that browser can construct a web page even before the image loads. Believe it or not, this can lessen load times and create a better, faster experience for your users.

So how do you handle image optimization in WordPress?

Aside from the initial naming of images, which needs to be done before uploading them to your site, WordPress allows you to easily set and adjust your images to fit your Image Optimization needs.

• When you’re ready to add a new image to your post, select the “add media” button at the top of the WordPress WYSIWYG editor.
• Then, you can either select “Upload Files” or you can just drag your new image into your browser window.
• When the image is done uploading, you’ll be greeted with the “ATTACHMENT DETAILS” dialog on the right. Here, you’ll find all the information about your image. You’ll also be able to craft your alt text, create a caption, or add a title and description to your image to give search engines even more help sending people your way.
• Don’t forget to choose an appropriate image size from the drop-down. Larger images = larger load times, which can affect your ranking with search engines, so you’ll need to use your best judgment as to how big your images need to be.

When you’re finished and you’ve got everything the way you want it, select the “insert into post” button at the bottom of the dialog. That’s it. Your image is finished cooking and is ready to start working for you. Remember to publish your post or page so your message can be heard.

Image optimization is just one step in a larger SEO campaign, but it is often overlooked. Add some simple steps to your content-publishing routine to make your images work even harder for you.

Check out our other posts for more SEO and Analytics tips and tricks.

Find out more about author and BBD developer Mike Hunnicutt and the rest of the team.

The post How do I optimize my images for better SEO? – WordPress Edition appeared first on Big Boom Design.

We’ve decided to offer up our Divi Child Theme for FREE!

The child theme gives you a great base to build out your next website. Here are a few of the child theme features:

• Set length of excerpt
• Set read more text
• Set Featured image size
• Hide projects custom post type
• Sets up some syntax elements that will let you easily create your own additions

Download your copy of the Divi Child Theme

The post Free Divi Child Theme appeared first on Big Boom Design.

A wise person once said, “If you can’t track it, it doesn’t really exist”. Google Analytics is a free tool that lets us track website traffic and make decisions about how to move forward with content and design.

Boomer Sassmann (owner of Big Boom Design) will be teaching a free Google Analytics class today (February 23rd) at the Enka/Candler AB Tech Campus. The class will be held from 3:00 to 6:00 and no registration is needed.

The class is meant for people who do not have experience with Google Analytics and are interested in learning the basics of how to track their website traffic.

The post Understanding Google Analytics for Business Owners appeared first on Big Boom Design.

With so many different devices out there between desktops, tablets, and phones, responsive web design is more important than ever. Responsive web design takes web design and development to a whole new level. New devices with different screen sizes and orientations are being created every day. It’s important to think about screen size, orientation, image resolution, platform, and ease of use. You need to think about if the theme you’re using is responsive or not. Designing a custom design for each type of device would be a tedious and overwhelming task. Instead, it’s important to plan out one design that will scale and transition smoothly between the different devices. The easiest way to do this is to start building your site for mobile devices first.

Mobile First Design

The concept behind mobile first design is to build a full and visually appealing site for smaller screens first, then add features and content for bigger screens and larger devices. This is also known as progressive enhancement. This process is all about prioritization. It may take a little longer to implement but it’ll help you focus on what the most important pieces of your website are and how to focus on those pieces and display them across all devices. Mobile web sites should uses minimal screen space, processing power, and plugins to and provide a great and functional experience for users.

Responsive Images

When adding images to your webpage you want to make sure you keep in mind how these images are going to look on all device types. To make an image responsive you can set the maximum width of that image to 100%. This will set the image to 100% of the screen so that the image will scale down if it has to but never scale up to be larger than its original size and look distorted. You also want to think about image resolution. Depending on the size of the image, it may look good on smaller devices but pixelated on larger devices. It’s important that the image is properly optimized so that it is displays well on all devices.

Responsive Themes

There are many responsive themes out there that can help you through this process. Most responsive themes will display your content in a grid type layout. For example, you might have a slider at the top of your site followed by four side-by-side blocks below, and below that, three side-by-side blocks. The idea behind a grid layout is that as your screen size gets smaller and smaller, each section’s layout will adapt to the screen’s width, adjusting the original view of the layout. So on a tablet, your slider will scale down, your four side-by-side blocks will turn into two sets of two side-by-side blocks, and you three side-by-side block might turn into three separate grids, one stacked on top of the other.

Most responsive themes provide your site with an array of responsive layout options. You can choose whether or not you want to display your sidebar on the left side or right side of your content. You can also add in header and footer elements but you have to take into consideration how each of these layout options will effect your site. For example, if you decide to have a left sidebar instead of a right sidebar, your sidebar content will display above your page content on tablet and mobile devices. Usually having a right sidebar is the better option because you’ll want to display your page content first, since that will contain your most important information first.

As your screen gets smaller and smaller or viewed through different devices, your navigation menu will also get smaller with it. It gets to a point where either your menu is to small to read or overlaps onto other header elements, like your logo. Many sites rely on drop-down menus. Since drop-downs rely on mouse hovering, they don’t work well on mobile and touch devices. Responsive themes help fix this issue by adding a mobile menu option to your site. When your site starts to scale down, your responsive theme will hide the desktop version of the navigation menu and display the mobile version of the menu. The mobile menu will, in most cases, create a three-lined mobile menu button (sometimes referred to as a hamburger menu) that users can click to bring a fade in or slide out menu (from the left, right, top or bottom). This option provides your menu with a clean and responsive look, making it easy to navigated through on smaller devices.

Be Responsive

With more and more users using different kinds of devices to browse the web, it’s important to make sure your site is responsive. It’s best to design your site with a responsive theme taking the mobile first design approach. Your site will benefit from it by providing your most important content to your users and be easy to navigate through multiple devices.

The post The Importance of Responsive Web Design appeared first on Big Boom Design.

On November 1st 2016 at the Asheville Chamber of Commerce the North Carolina Blue Ridge Host Group had their annual meeting. Big Boom Design was asked to prepare a presentation that would cover Web Tracking Analytics, Google Adwords, and the Non-Profit Google Grant opportunities. During the presentation there were a number of resources discussed so this post is a follow up to that presentation with notes. If there was a tool or service mentioned during the talk that I have not included below, please feel free to reach out.

A special thanks to Melinda and Pepper for inviting Big Boom Design to speak about these topics.

Prezi Presentation

Notes about Tools and Services Mentioned

• Custom Google Analytics Dashboard – https://analytics.google.com/analytics/web/template?uid=grFISzS4RSyCT2lrg7y5ZQ
• Crazy Egg – https://www.crazyegg.com/
• Google Analytics – https://www.google.com/analytics/
• Google Adwords – https://adwords.google.com
• Google Grant Info – https://www.google.com/grants/
• Google Webmaster Tools – https://www.google.com/webmasters

The post NC Blue Ridge Annual Meeting Presentation appeared first on Big Boom Design.