You came across a stylish blog, or found that playful looking site suggesting last minute self-crafted presents for your besties, and you asked yourself: How to create such beautiful site?
Perhaps you are looking for inspiration to build your online shop? Or you spotted a cool widget of a site, and you like to have it too?
Just find out the platform a website is using.
And get all your answers.
This will not only satisfy your curiosity, but also helps you to identify the ideal website builder for your purposes (should you still be seeking for the right one).
Knowing the applications, will in addition let you compare styles and layouts. Furthermore, it will give you an impression about the functionality and possible integration of widgets website providers offer. It is worth digging deeper.
How do you recognize the source of a website? It is easier than you think.
Finding the source of a website
Many roads lead to Rome. There are straight forward and not so obvious ways. Let’s begin with the obvious.
The most common website builders let people create websites for free. These automatically receive a website address that signalizes the site is stored as a subdomain under the providers name. A subdomain is a domain name separated by a dot from the main domain. It is also the original domain, as its origin is the specific provider.
For example, when you open a new project with Webnode, the URL of your free project will be your project name plus Webnodes domain, such as mywww.webnode.com/blog.
Should you create more than one project with the same name, like myblog, the subdomain will systematically change to myblog1.webnode.com and so on. No domain can exist twice.
Example of a Webnode subdomain
If you notice a subdomain, you can be 100% sure, it reveals the website provider.
Another second obvious way to recognize the website platform are advertisements. All free websites carry an ad in their header, footer or elsewhere on the pages.
Different banner ads for different website-builders
In addition, they may contain a small print in the footer about the copy right source. The website owner cannot remove this source, unless he or she purchases a Premium Plan.
Depending on the business model of the website provider, certain paid versions may still contain a banner ad or a more discrete note in the footer even though the domain is a personal one. There is a good chance you may find out about the provider by just scrolling down to the end.
The not so obvious way finding the source
Once a website holder purchased a certain tariff and registered a personal domain, you will not see what platform the site was created with. A quick way to find out is to use website platform scanners.
Website platform scanners
One of the constructive ones is builtwith. You search for the web address or domain name and the scan report will give away the source data. It discloses the website platform and data, such as the web servers, SSL certificates and cookies. A similar one is WhatCMS.
Results of the buildwith website platformscanner when searched for Amazon.com
Other useful tricks
You are a young entrepreneur searching for new contacts?
Online tools for generating business leads, such as Wappalyzer are good in providing you with an overall market overview. Use it to learn more about your competitors.
Wappalyzer, as a browser extension, will tell you what technologies a site is using. Although it not immediately exposes the website-provider, it will nevertheless give you an idea about widgets and other applications on a site you may seek for.
At this point it is good to know that all widgets in form of a HTML-code can be easily embedded in Webnodes websites.
A click behind the scenes
Everyone who opens a website in a browser can see the source code or the HTML-script of the website. The frontend describes what the viewer sees on the site. It is defined in the code and incorporates the styles and layout of elements, such as text and images.
In Firefox or Chrome browsers you display the code by right-click anywhere on an open page and selecting “inspect”. Alternatively, a shortcut for PCs: CTRL+Shift +I or CMD+Shift+I for Mac will catapult you to the sources.
Example of showing the source code of a website in the developer tools window of the browser
A new window below will pop up with a lot of happily colored cryptic code. This is the developer tools window. At the top you will find a menu with tabs and to the right the “x” to close this cryptic scene. Do not feel deterred if all feels a bit fuzzy now. Concentrate on the menu tabs.
Depending on the browser, these tabs have different names. Some hint to their content, for example cookies. The source tab will reveal the websites origin.
Now it gets a bit like playing an investigator tracing back fingerprints of a crime scene. Source does not equal source. It is different from browser to browser.
The following sections will show you three browser examples: Google Chrome, Safari and Mozilla Firefox.
Once you opened your favourite site in Chrome perform a right-click to select “inspect”. Go to the sources tab and keep your eyes to the left leaving the page menu open. Open the top folder with the clouds dropping down.
Example of source in Google Chrome
You will find the website provider usually amongst the first 5 listed. Depending on the system, the provider is visible in a specific folder tab. This is the case for WordPress created sites. Others can be recognized starting with the letters “cdn.” or you will see the original domain, which is always the subdomain of the provider.
Similar to Chrome, open the source code with the shortcut CMD+Shift+I or click on the Develop tab on the top menu of your browser bar. Go to the sources tab and search for the name “generator”.
Source indicated in the develop tab of the Safari browser
Here the website generating system usually mentions the provider. In the case of Webnode you will find Webnode 2. This relates to Webnodes newer website builder, which is constantly evolving.
Finding the source in Firefox might require a bit more of a Sherlock Holmes in you than other browsers.
You reach the source code in the same manner as for Chrome browsers by clicking on “inspect element”.
Sources in Firefox
The source tab in Firefox hides under the debugger and style editor tab. Therefore, you have two options to seek information about the website provider.
You can try the style editor tab to find some specific defined website style code or other licensed content of a provider. This is the case for Webnode. You will detect the website platform under Author.
More commonly the debugger tab will disclosethe provider. Under a similar structure as in Chrome you will find a drop-down menu to the left under the Main thread folder. Here, the website builders name can start with the abbreviations a. or asset. or res. Some builders can be recognized by folders disclosing the name, such as WordPress, where the folder starts with “wp-“. It is not always crystal-clear but the more you train your eye, the easier it will get.
Don’t be frustrated if you do not find the source. Sometimes this information is simply too hidden and not visible in the frontend. Instead, use the newly learned skills to your benefit. The hieroglyphs of code tell you quite some useful stuff.
How do I get the most out of this?
Finding out what program a website is made with, will:
- satisfy your curiosity
- helps you to select the best website builder for your purposes
- gives you information about available widgets and their integration
- lets you compare different styles and layouts
- provides you information about the functionality
- can give you inspiration for your coding
A click behind the scenes unveils a lot from the websites frontend and its sources. Curious people like you may also want to know:
Can a website be copied or duplicated by coping the code?
You cannot copy a website by copy-pasting the HTML-code. To make a website function you need to construct the backend of the site. This part of the code is never published.
Is revealing such content rightful?
The frontend on its own is useless. Therefore, there is no harm done showing it. If you are a creative hobby coder, such code examples may bring you some ideas. As a creative mind you seek inspiration without the means to copy.
What else it is good for?
The mentioned tabs in the developer tools are useful for you if you like to know more details about certain elements and widgets. Left to the tabs a pointer lets you select any element on the open page (text, image, block, background) to show you the detailed HTML code. Here, you can find out about the specific colors or font types used.
If the elements tab is open, it presents you the individual code for each element on the page, may it be an image, a text, or a heading.
The cookies tab shows you the cookies used on your site.
The security tab for example shows you the type and validity of the SSL -certificate your site currently uses.
Should you own a website you can use the developer tools to find out what design and style details your website is cloaking in the normal view.
If want to discover the program a site was made with, you now own all the tricks turning you into the best investigator.
Be sure to also read the step-by-step guide for working with the website builder.