Alternatives to Google Tools for Web Designers

Read MoreGoogle is essentially at the center of the web as we know it, meaning it is in turn at the center of many aspects of web design. We typically spend a good amount of time thinking about optimizing our content for Google’s search engine, testing our sites in their Chrome browser, hosting our videos on their YouTube platform, using their web font service, and so on.However, as with any set of tools, it is always worthwhile knowing what additional choices are available. Even if the tools and services provided by Google are the perfect fit for your needs today, one thing web designers all know at this point is that the online world can change quickly. It’s only prudent to be aware of all the options we have to choose between, or we might find we are missing out on some of the best the web has to offer at any given time.Note: the purpose of this article is not to malign Google’s collection
of tools and services, because undoubtedly every one of us has found them to
be very useful across the years. Rather, it’s to refresh our knowledge of all the other very useful tools and services also out there on the wide web.How This Article Can HelpWe’ll be going through some of the Google products, services and tools used in web design, talking about why alternatives can be of benefit in each case, and exploring the most compelling options capable of delivering said benefits.There are many Google based tools you may currently be using indirectly in your web design work, such as office software or email, but to avoid getting off track we’re focusing on things you might implement directly into a site or use during the actual web design process. We’re also not going to talk about every possible benefit a tool or service might have in comparison to Google, just those specifically relevant to web designers and our clients.To that end we’ll start every section with a bullet list entitled “Use in Web Design” so we can see why we’re talking about the tool or service in the first place. We’ll follow that up with a brief summary of the web design specific benefits you may be able to get out of alternatives.I should also point out that I haven’t listed every single alternative in every single category, so if there’s an option you have experience with and know is excellent, go ahead let everyone know about it in the comments.Among the alternatives we look at you may find options you want to use
to complement your existing Google based solutions, or even use to
replace them entirely. Let’s begin!Table of ContentsAlternatives to Chrome DevTools

Alternatives to Google Fonts

Alternatives to Google Analytics

Alternatives to YouTube Video Hosting

Alternatives to Google AMP

Alternatives to Google Cloud CDN

Alternatives to Google Search

Alternatives to Google Hosted Libraries

1. Alternatives to Chrome DevToolsUse in Web DesignDebugging
Performance and other audits / analysis
Testing code tweaks
Why Consider Alternatives?Access features that may not be present in Chrome DevTools1. Firefox Dev ToolsThe DevTools alternative I personally know best, (given it’s my go to when coding), is Firefox DevTools. Just as the Chrome team is busily working away adding helpful new features to their developer tools, so too is Mozilla’s team. There have been several features available only in Firefox DevTools, (either for a time before matching features appeared in Chrome or still unique to this day), that I have found incredibly helpful in the web design process. For example:CSS Grid inspector

Flexbox inspector
Shape path editing
Font inspector panel with variable font support
CSS filters editor

Inactive CSS indicator
Learn more about Firefox Developer Tools with these articles:Firefox
14 Firefox Developer Tools You Might Not Know About
Kezz Bracey
Firefox
9 Things You Didn’t Know About Firefox Dev Tools
Kezz Bracey
CSS
Find Out Why Your CSS Isn’t Working! New Firefox DevTools Features
Kezz Bracey
Firefox
Firefox vs. Firefox Developer Edition: What’s the Difference?
Kezz Bracey

2. Alternatives to Google FontsUse in Web DesignWeb font downloads
Web font hosting
If you’re new to working with web fonts you can learn all the essentials here in 60 seconds: Web Fonts in 60 SecondsFonts for use on a website require files that are loaded from one of two places; the visitor’s own system, or a web server. Let’s take a quick look at web…

Kezz Bracey
30 Oct 2017

Web TypographyWhy Consider Alternatives?Complete control over font loading process
Use fonts not available on Google Fonts
I’m sure we’ve all used Google Fonts many, many times in our sites over the years. It’s certainly made it very easy to just grab a URL and add it into your <head> section then call it a day. However there is a whole world of beautifully designed fonts out there we can access for our designs, some of which will never appear in the Google Fonts library.Additionally, if we decide to handle hosting and loading fonts ourselves we have the ability to completely dictate when and in what manner the files are bought in, ensuring the methods used fit with our site optimization strategies.Let’s start by looking at alternative locations from where we can download fonts, then we’ll touch on alternatives for font hosting.1. Envato Elements FontsKey Features:2,767 web fonts
All fonts available as part of a single monthly subscription
Website: https://elements.envato.com/fonts2. Graphic River FontsKey Features:7,500 fonts
Several formats available
Test fonts inline before purchase
Website: https://graphicriver.net/fonts3. Font SquirrelKey Features:Free fonts, commercial use allowed

@font-face generator
Website: https://www.fontsquirrel.com/4. FontSpaceKey Features:2,784 font designers sharing free fonts
61,687 fonts
Website: https://www.fontspace.com/5. The League of Moveable TypeKey Features:Open source fonts you can study to learn how fonts are made
Free of charge
Website: https://www.theleagueofmoveabletype.com/Now let’s turn our attention to some hosted fonts alternatives.6. Fonts.comKey Features:Pay according to the amount of traffic your sites have
14,959 web font families
Website: https://www.fonts.com/7. Typography.com (aka H&FJ, aka H&Co)Key Features:Pay per year with tiers depending on your level of traffic
Uses a CSS only, no JS font loading method
Website: https://www.typography.com/H&FJ Web Fonts: A Field GuideSince Hoefler &amp; Frere-Jones announced their foray into the world of web fonts, the internet has been overflowing with the rejoicing of designers and…

Dan Eden
30 Jul 2013

Typography8. Self HostingSometimes the best alternative for hosting fonts is simply the server infrastructure you already have setup for your sites. All you need to do is upload your fonts of choice to your site’s hosting space then use @font-face to load them into your site. For faster loading speed you might like to deliver your font file through a CDN (content delivery network), something we’ll talk more about in just a moment.If you’ve never worked with @font-face check out our guide:Figuring Out @font-faceWithin the last five years, typography on the web has taken quite an about face (sorry, pun intended). It used to be that web designers were constrained to…

Jeremy Loyd
02 Sep 2013

Typography
3. Alternatives to Google AnalyticsUse in Web DesignTracking site traffic and related metricsWhy Consider Alternatives?Ability to self host
Multiple data sets for a “second opinion”
Control over collected data
Ensure analytics respect user privacy
1. Matomo (formerly Piwik)
Key Features:Free and open source
GDPR compliant
Self hosting option
Claims greater accuracy than Google Analytics
WordPress plugin available – automatically sets up self hosted analytics on your WP site
Add-ons available e.g. WooCommerce analytics, A/B testing, user flow, heatmaps
Notable clients:NASA
United Nations
Amnesty International
Red Bull
Website: https://matomo.org/2. FathomKey Features:Doesn’t require cookies
Single page, “at a glance” presentation of data
GDPR compliant

Data policy clearly explains how they ensure visitor privacy
Website: https://usefathom.com/3. CountlyKey Features:Self hosting option

15 open source SDKs so you can deploy to mobile, web, desktop, smart devices and other platforms
Plugins available, e.g. A/B testing, heatmaps, user retention, funnels
Free community edition available
Notable Clients:Microsoft
Coca Cola
Ubisoft
Verizon
Website: https://count.ly/4. PlausibleKey Features:Free and open source
14x smaller JS file size than Google Analytics

Data policy clearly explains how they ensure visitor privacy
Website: https://plausible.io
4. Alternatives to YouTube Video HostingUse in Web DesignHosting video content to be embedded in client sites and our own sitesWhy Consider Alternatives?Maximize focus on your video topics rather than losing attention to suggested videos / auto-playing queued videos
Customizable video players
Add branding and calls-to-action
Gain more analytics data
Replace videos without losing tracking data
1. VimeoKey Features:Custom, branded video players available
Option to charge viewers to watch content
Collaboration tools available
Live streaming available
Analytics included
One-click cross post to other platforms
Website: https://vimeo.com/2. VidyardKey Features:Unlimited bandwidth
55 global CDNs
99% uptime
Integrated calls to action
Customizable player
Analytics and A/B testing
Support for 360 videos
Automatic transcription
Website: https://www.vidyard.com/
5. Alternatives to Google AMPUse in Web DesignPage speed optimization
Boost in search rankings
Why Consider Alternatives?Ability to use standards based code
Ability to use external JavaScript
Retain control over your URLs and traffic
Ensure graceful degradation, e.g. works without JavaScript
1. Good Code and a CDNSure, this is a little reductionist, but at the end of the day that’s all AMP really is – optimized code and content pre-cached in a CDN. What AMP does is handle the optimization and CDN setup for you, but if you take the reins yourself you can achieve optimization to the same or greater level. If you take this task on yourself instead, you have greater freedom in how you write your code, and can ensure visitors come to your site and your URLs rather than the version of your site hosted on Google’s servers.Learn techniques to optimize your site without AMP, keep up to speed with the state of SEO, optimize your images using current HTML5 responsiveness techniques and new file formats. Stay on top of requirements for specific kinds of development work, such as SEO friendly theme creation. Know why each and every line of code exists in your projects, and cut anything that doesn’t need to be there.Once you’ve written your beautiful, clean, minimal and efficient code, use a quality CDN to deliver your sites as quickly as possible to your visitors. If you really want to emulate AMP you can even deliver your sites through Google’s own cloud without using AMP itself, for example, simply by hosting a WordPress site with Kinsta on its Google Cloud based network. Or, select another CDN of your choice, a selection of which we’ll be covering in the next section.CSS
Optimize Your Website Without AMP: Optimization Checklist
Kezz Bracey
CSS
New Course: Optimize Your Website Without AMP
Andrew Blackman
JavaScript
Who Needs AMP? How to Lazy Load Responsive Images Quick and Easy with Layzr.js
Kezz Bracey

6. Alternatives to Google Cloud CDNUse in Web DesignOptimize site load speed by delivering from servers near your site’s visitorsWhy Consider Alternatives?Platform specific features1. QUIC.cloudKey Features:WordPress specific, responding to WordPress events
DDos protection
Cache views by user group
Website: https://www.quic.cloud/2. CloudFlare CDNKey Features:Unmetered DDoS protection
Cloudflare cache API available to control caching
Cross origin resource sharing
Large global network
Website: https://www.cloudflare.com/3. Amazon CloudFrontKey Features:DDoS mitigation
Elastic load balancing
200 points of presence
Integrated with AWS
Website: https://aws.amazon.com/cloudfront/4. KeyCDNKey Features:Provides a WordPress plugin: https://wordpress.org/plugins/cdn-enabler/

34 data centers and 81,609 zones
100% SSD coverage
Provides RESTful API
Website: https://www.keycdn.com/
7. Alternatives to Google SearchUse in Web DesignSearching for technical informationWhy Consider Alternatives?Use shortcuts to jump to searches on additional sites, not just the search engine itself
Access development help, such as inline code samples and cheat sheets
1. Duck Duck GoBangsBangs are little shortcuts you can add to your search phrase to search sites other than DuckDuckGo.Want to learn some HTML? Just search learn html !tutsplusNeed a Powerpoint template? Search for powerpoint !graphicriver See all the bangs available at: https://duckduckgo.com/bangInline Code SamplesMany searches for coding related questions will provide answers with inline code you can directly copy and start using in your work. In this example I have searched for “jquery select element” and been presented with the relevant information from jQuery’s API page:Cheat SheetsDuckDuckGo has the ability to display cheat sheets for several different languages. Just search for “<language> cheat sheet” as seen below:Website: https://duckduckgo.com/Cheat Sheets
20 Handy DuckDuckGo Cheat Sheets for Web Designers
Kezz Bracey2. QwantQwick search shortcuts Qwick search shortcuts work in essentially the same way as DuckDuckGo’s bangs, with the difference being you will use the & symbol instead of ! to prefix the shortcut.For example, if you wanted to search for a multi-purpose theme through Theme Forest you can simply type multi-purpose theme &themeforest and be taken straight to a list of search results on Theme Forest.Or find a slider plugin for WordPress at Code Canyon with slider plugin &codecanyonMore on qwick search shortcuts.Inline Code SamplesQwant, like DuckDuckGo, also has the ability to provide inline code in its search results. I have found that it is a little bit less likely to show code in results, but when it does it provides more code in a format more easily read. For example:Website: https://www.qwant.com/
8. Alternatives to Google Hosted LibrariesUse in Web DesignQuick and easy loading of files from third party librariesWhy Consider Alternatives?Load libraries not available on Google Hosted Libraries
Spread risk by using multiple CDNs to avoid a single point of failure
1. jsDelivrKey Features:Libraries from NPM, GitHub and WordPress
Combine files
Minify files
Version aliasing
Usage statistics
API available
Free of charge
Website: https://www.jsdelivr.com/2. cdnjsKey Features:3,442 libraries available
Aims to host all popular libraries
API available
Free of charge
Website: https://cdnjs.com/Wrapping UpThe great thing about the internet and the web design field is there is always someone innovating, coming up with the next amazing tool that is going to take our profession to the next level. So even if you’re quite happy with your current tools it pays to take a moment to look around from time to time.I hope you’ve found some tools and services in here that piqued your
interest and potentially helped bring some new utility into your web
design workflows.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Hey Twin Tiers! Would you like a...

free website, free email, free SEO, & free EVERYTHING for a full YEAR?!?!?

Click below and be entered to win FREE digital media for a year!

A custom-built website, email addresses, SEO, and so much more… all for free… all for a full year!

Why? … Well, we’re new here and we’d like to get known. But HURRY… this definitely wont last!!!

We swear there is no catch… so what do you have to lose?