Creators Guide to Web Development

Build modern websites, optimised for search and marketing

Art

The World Wide web

The World Wide Web (WWW), is a system of documents and other web resources each identified by Uniform Resource Locators (URLs, such as https://www.example.com/). These documents may be interlinked by hypertext, and are accessible over the Internet. T may be accessed by users by a software application called a web browser.

The Internet

The Internet is constantly growing and developing in usage, and content. The were 4,100,667,287 internet users on January 1, 2019, and around 1.94 billion websites on the Internet. In 2019, 330.6 million domain names had been registered. Worldwide internet penetration rate is around 55.1% (as compared to 35% in 2013). In 2018 approximately 40% of the world’s population had an internet connection compared to 1995 when it was less than 1%.

internet service provider

An Internet service provider (ISP) is an organisation that provides services for accessing, using, or participating in the Internet.

Google is not the Internet

Google has 35 trillion Web pages in its index, but the index only represents an estimated 4 percent of the information that exists on the Internet.

There are more than 7 billion Google search queries a day worldwide with 15% of those queries have never been searched for previously.

Google receives over 63,000 searches per second on any given day. That's the average figure of how many people use Google a day, which translates into at least 2 trillion searches per year, 3.8 million searches per minute, 228 million searches per hour, and 5.6 billion searches per day

Google (the verb) possibly become the most useful word in the English language with the search company) now the de facto standard for how we find information on the Web.

The Deep Web

The contents of the web not indexed by standard web search engines are called the deep web, invisible web, or hidden web. The the surface web is the opposite term.

The deep web contains a whole world of information that is nowhere to be found in Google. The invisible web consists of content such as unpublished blog posts, password protected content, FaceBook posts, Web pages not linked to, websites that require subscriptions.

You can browse this content using the Tor browser which lets users anonymously access sites and databases that would otherwise never be found. You can read more about the deep web or invisible web or hidden web on Wikipedia

The Web

What is the internet of things?

Extending our Internet connectivity into physical devices and everyday objects is known as the Internet of things. Devices can communicate and interact with others over the Internet, and be remotely monitored and controlled. The Internet of things is accomplished using embedded with electronics and other forms of hardware with Internet connectivity.

The Web

Which is best internet browser?

We have a lot of choice — Mozilla Firefox, Google Chrome, Opera, Microsoft Edge (meant to replace Internet Explorer) and Tor Browser.

Deciding on the best web browsers comes down to speed and security. Yiu want a browser that's very fast, light on system resources and strong on privacy. toolsare Mozilla Firefox, Google Chrome, Opera, Microsoft Edge (meant to replace Internet Explorer) and Tor Browser.

My opinion is the of the bunch is Google Chrome. Chrome is cross-platform, incredibly stable, syncs across all of your devices, has great developer tools and is plain lovely to use.

THE WORLD WIDE WEB

What are Domain names?

A domain name is an identification string, to identify a network domain, or represent an Internet Protocol (IP) resource, like a personal computer used to access the Internet, a server computer hosting a web site, or a web site itself.

DNS

Domain Name Servers (DNS) are the Internet's system to translates human-readable domain names (universe.com) into IP addresses (192.0.2.0). They maintain a directory of domain names and translate them to Internet Protocol (IP) addresses. From Wikipedia

There are now more than 1,000 top-level domains (TLDs) for internet addresses, most of us know well the top 5 which are .com, .org, .co, .us, and .net. DNS overseer ICANN has added "new generic TLD"  such as .airtel, .barcelona, .bcn, .game, .jprs, .live, and .studio.

I recommend Name Cheap for domain registration. I've used them for years and they are great.

Top-Level Domain vs generic TLDs

There are more than a 1,000 top-level domains (TLDs).

A top-level domain (TLD) is a domains at the highest level in the hierarchical Domain Name System of the Internet. A country code top-level domain (ccTLD) is an Internet top-level domain generally used or reserved for a country, sovereign state, or dependent territory identified with a country code. From Wikipedia

A generic domain (TLD) a generic top-level domain name is the top-level domain name such as .com (commercial), .net (originally intended for Internet service providers), .org (for non-profit organisations, industry groups, and others), .gov (U.S. government agencies), .mil (for the military), .edu (for educational institutions); and .int (for international treaties or databases and not much used). For example, in the domain name, www.bambi.com, .com is the chosen gTLD.. From Wikipedia

Domain names

How to Register and Host A Domain

You can create something that matters. And it starts with a website. It can seem overwhelming at first, but it's all figureoutable. Read this article to get an idea on how simple it can be to grow a business online that matters. You don't have to save the whole world.

Find your Domain with Namecheckr

First, you'll need to check for domain & social username availability. NameCheckr is a free tool for this and lets you search across a multitude of networks.

Host your Domain Name Somewhere

Great, you found your name. Now register and host it to serve it up online. I use DreamHost, a hosting and domain name service. I've been with them for decades., they are competitively priced, offer unlimited hosting (unlimited domains and storage), and their admin portal is intuitive. Also, their online chat support is excellent and you never have to wait. Create an account, you can register your domain there, and it's automatically hosted.

Serve up Your Website Using HTTPS

Serve your website securely using HTTPS. This is how DreamHost does it. Adding an SSL certificate to your domain allows it to be accessed over a secure connection using the HTTPS protocol. This encrypts the data transmitted between a visitor's web browser and your website, ensuring all data transmitted back and forth is safe and secure.

When a browser recognises a secure Web site, it uses the secure certificate information to verify that the site is authentic. WebFlow hosting does this by default. If you opt for WebFlow you'll purchase your domain name and point the domains DNS settings to Webflow, and you are done.

Google recommends that all websites use https:// when possible, in fact it favours sites supporting HTTPS. Using https:// for websites will increase your rankings, preserves referrer data, and is more secure and private.

HTTP stands for Hypertext Transfer Protocol (http), a system for transmitting and receiving information across the Internet.

HTTPS or “secure http”, is the secured version of HTTP. It allows secured transactions and confidential information exchange, preventing unauthorised access. HTTPS offers an extra layer of security because it uses SSL to move data (Secure Sockets Layer) the standard security technology for establishing an encrypted link between a web server and a browser.

html5 & css3

Code Pages in HTML5 and CSS3

While you don't need to be able to actually code HTML5 and CSS3 to create a modern website, it does however help to have a high level overview of the languages you are building with.

Visual code editors

Visual website coding tools like WebFlow enable you to create HTML5/CSS3 websites with out knowing the languages, but understanding the basics helps put's it all in context.

HTML5

HTML5 is the fifth and current major version of HTML, the markup language of the Internet. HTML5 contains new page elements, attributes, and behaviours, and technologies, for building more diverse and powerful Web sites and applications. It is designed to create more semantic page content, making the language more easily readable by humans and more consistently understood by computers and devices such as web browsers.

CSS3

CSS 3 is the latest version of the Cascading Style Sheets language. CSS is used to create files with a .css extension known as style sheets, which are used to format the layout of Web pages. CSS3 delivered a ton of new goodies for web designers like multi-columns, flexible box or grid layouts, and rounded corners, shadows, gradients, transitions and animations. All modern web browsers support CSS3 making it possible to use the new features reliably across desktop and mobile browsers.

Essential Website tools and Apps

Webflow

WebFlow is an online tool for designing, building, and launching responsive websites visually. You get full design control to build sites in the browser using a drag and drop interface. You then either host with WebFlow or export your code for hosting elsewhere.

The beauty of WebFlow is its drag and drop visual editor it doesn't create bloated coded, and uses semantic markup and enables precise styling of CSS properties. The result is you create the design you want, and wind up thinking less like a graphic designer and more like a front-end developer. Webflow offers fantastic tutorials, online support and a rich user community.

I've been using Webflow for more than a year now, I build my client projects on the platform and can't recommend it highly enough.

Webflow Pricing

The Basic hosting plan is $15USD per month which includes most features. The CMS hosting plan ups the cost to $20USD per month. An account plan is free with limitations, but from 16USD you get 10 projects, client billing, code export, and a suite of other goodies.

Webflow Hosting

Webflow hosting is not cheap, but it's fast and beautifully implemented. You point your domain to WebFlow and you then publish straight from WebFlow with one click. WebFlow's hosting is provided by Amazon Web Services (AWS) cloud computing platform and facilitated by a global content distribution network (CDN) powered by Fastly and Amazon Cloudfront.

webflow vs SquareSpace

SquareSpace is a template-based drag-and-drop tool, which might seem easier at first, but the editing process compared to Webflow is just plain clunky and limiting. Webflow has thought everything through properly. The visual web design approach is so nice to use. You are not constrained to templates (you can use editable templates if you wish) and you are able to start with a fresh canvas and design and building something precisely. Webflow is just a wonderful editing experience. You can compare Webflow and Squarespace.

webflow vs WordPress

Much the same as with SquareSpace, Wordpress is bloated and clunky and limiting to people who are not coders. With Wordpress you are editing templates, and the whole thing gets very ugly very quick. Although you can very quickly establish a WordPress site, and that can be tempting, and cost practically nothing. But you wind up loathing the design and the editing process. I was always looking for a design and build process that was completely custom and visual. And I finally found it with WebFlow. Here you can also compare Webflow and Wordpress

webflow cMS

Webflow is not a static site system, you can add their CMS plan and design and develop content-driven sites. They have managed to create a harmonious marriage between the CMS and designer tools and this really sets Webflow apart from all of the competition. This is the future of digital design/development.

webflow ecommerce

Early in 2019 Webflow launched their ecommerce offering. Shopify must be watching them coming. They are calling this the first ecommerce platform that gives you control over everything.

webflow university

Need any more reasons to consider Webflow? I think they might have assembled the worlds best learning resources with their university support site.

Google Search

mobile-first indexing

Google's has shifted to mobile first indexing, where it looks primarily at mobile content, rather than desktop, when deciding how to rank results. Google has stated it sees more mobile searches than desktop searches on a daily basis, as people increasingly use their smartphones to search for answers.

Google Mobile First Index

Googlebot (Smartphone / Desktop)

Google's main crawler is called Googlebot which is actully two different types of crawlers: one for desktop crawler that simulates a user on desktop, and a mobile crawler that simulates a user on a mobile device. A web 'crawler' automatically discovers and scans websites by following links from one webpage to another.

How to Prepare for Mobile First Indexing

The Googlebot now primarily crawls and indexes pages with the smartphone agent going forward and uses the mobile version of a websites content for indexing and ranking. Before now, the index primarily used the desktop version of a page's content when evaluating the relevance of a page to a user's query.

This change reflects the fact that now the majority of users access Google Search using a mobile device.

Is your web page mobile-friendly?

You can test if your web page mobile-friendly using online tools to determine how easily a visitor can use your page on a mobile device.

Create a mobile-friendly website

A mobile-friendly site is easy to view and use on a mobile device. The site does not require users to pinch or zoom to read the content, and is readable and immediately usable. A mbile friendly site means visitors can have a good experience on your site from their mobile device.

Create Rich and Unique Mobile Content

Making sure your site has rich and unique content should be your focus. This helps a webpage rank higher in search results. But also make sure both your both mobile and desktop site versions have the same content.

Creating Quality Content

Quality outweighs quantity with Google’s recent algorithm updates. So keep this in mind and produce better content that actual matters to people reading it.

Create a exemplary Visitor Experience

Making sure your site has rich and unique content is not our only concern, we also want to create a positive site experience. We can do this by basically adhering to Progressive Web App best practices. A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users.

Creating an exemplary visitor site experience means it is:

Use Google's Site Tools to Optimise

You can use Google's Page Speed tool to test your domains mobile speed

Use Google Search Console to resolve site performance issues and improve your sites performance in Google Search results.

PageSpeed Insights allows you to analyse the contents of your web pages and get suggestions on how you can make that page faster.

responsive websites

Design Responsive Websites

Designing a responsive website is the process of designing a website that adjusts (responds) to the size of users’ screen size. it looks good on desktop, tablets and mobile phones. This give site visitors the ability to quickly and easily find the information they need and perform the actions they’ve set out to do. This design direction falls under the idea of a consumer-first strategy.

small screens first

Designing for the smallest screens first, then designing for larger tablets and desktop computers is the premise behind mobile first design.

Responsive design

Responsive Design Ethan Marcote coined the term Responsive Design in 2010. The terms describes a website’s design site’s layout and content changing based on the width of a browser on a device. Responsive web design is at the heart of visual coders like WebFlow, making the process relatively easy now. In my opinion Responsive Design is the way to go currently, as there are still many desktop users out there. But be sure to test your uniques audience to dertimine the percentage of mobile vs tablet vs desktop visitors.

Mobile first design

Mobile First Design. The mobile-first design approach, is like responsive design, but it prioritises designing the for unique constraints and browsing behaviour of viewers on mobile devices. It is prioritising design for small screens, which is fast becoming the main way people browse the web.

Keyword research

Perform Keyword Research

Keyword research is about finding out what your target audience is searching for and what it will take to rank for those keywords. Knowing the keywords you are relevant enables you to effectively optimise your website, target phrases for link building, and write content that people are looking for.

Google search queries

We don't have to sell our souls. We just have to realise where what we do intersects with what others need.

Buying-intent keywords

Buying-intent keywords where the person searching is looking to make a purchase will give you the best chance to drive leads and sales.

Research-intent keywords

Research-intent keywords are where the searcher is most likely just doing research.

SEO

Optimise for Search Engines (SEO)

Search Engine Optimisation (SEO) is about improving the quality and quantity of unpaid website traffic. SEO is all about increasing visibility of a website or a web page to users of a web search engine. Good SEO tactics focus on increasing the quantity and quality of traffic to your website through organic (non paid) search engine results.

The Google search algorithm

Google’s search algorithm takes into account many factors, but one of the most important signals is the number of websites that reference, or link, to the information.  Each link is like a vote in that website’s favor telling Google that it deserves to rank high in the search results.

SEO Matters

The goal of SEO is to make it as easy as possible for Google to find your website (by using proper HTML code, writing relevant copy, designing for ease of use, optimizing page load speed) and then to give Google a reason to rank your website higher than all the other relevant websites (by publishing better and more robust information, getting more links, more online PR).

On-page SEO

On-page SEO is all about Google’s ranking factors, such as your headlines, content, and page structure.

Off-page SEO

Off-page SEO refers to all variables Google takes a look at, and they aren’t exclusively in your own hands. They depend on other sources, such as social networks, other blogs in your industry, and the personal history of the searcher.

KEYWORD Research

Keyword Research Tools

Keyword research tools to position your SEO efforts for success.

Google Trends.

Google Trends. The trends tool visualises how search trends change over time. You enter a keyword or a topic and see the trending searches around the world. SEO aside it's a fascinating insight into the world and it's people.

Google Search Console.

Google Search Console. This free Google tool helps you submit your content to Google and monitor how you're doing in Google Search. It also allows you to see which search queries sent the most clicks to your site in the past 28 days. It checks your indexing status and allows you to optimise the visibility of your website. You can measure performance, resolving issues, and optimising your Google ranking results.

Google Search Suggestions

Google Search Suggestions. Another useful tactic is using Google's search suggestions to determine keywords to optmise for. The suggestions appear under the search in a Google search before you've even finished typing and are allow you to indentify keywords you can optimise for. Continue typing your search to get more detailed search suggestions. Change your Google settings to reflect results from your desired location Google assumes you are looking from your location and sign out of your Google account for non-personalised recommendations.

Answer the Public

Answer the Public. This is a fabulous visual tool to discover the questions and queries the public at large are searching for in Google. Organised into the what, where and why, Answer the Public 'search clouds' provide insight into the questions people are typing into search engines.

Uber Suggest

Uber Suggest. I think this is the web's best free keyword tool. You get a breakdown for a keyword’s volume, cost per click, and the competition you’ll be facing to rank the keyword. You can spy on your competitors sites for ideas and to see what they are ranking for. And for low budgets you can indentify low competition, low cost per click keywords to grow.

Content is king

Content is king. To do well with SEO is to simply produce great content. This means regularly published unique content with 300-500 words. Publishing high-quality, unduplicated content consistently on our sites is a key factor for SEO and search engine ranking.

SEO Page Structure

Structuring Your Web Pages For SEO

Follow these guidelines to make sure you are structuring your pages for SEO. Get in the habit and make sure you cover your bases as you develop. You'll be glad you did.

Use the 'description' meta tag

A page's description meta tag provides Google and other search engines with a summary of what the page is about. A page's description meta tag can be a sentence or two or even a short paragraph, versus the page's title which is ideally only a few words or a phrase. Best practice is to use the description page to accurately summarise the page content.

Creating SEO Friendly Page Title Tags

Title tags should contain your main focus keyword. So use descriptive and concise page titles that have the main keyword you are ranking for.Title tags should describe a benefit.

The Title for this page on SEO page optimisation is, Mastering the Art of SEO. Is that what someone would want to know about SEO. You bet it is.Make sure you don’t have any duplicate title tags. Google explicitly states "it’s important to have distinct, descriptive titles for each page on your site." So don’t copy and paste your title tags.

Make sure page title tags are SEO friendly.

Create good title tags to deliver an important idea to your potential readers in a few words. Titles provide a quick insight into the content of a result on Google Search and is often the primary piece of information used to decide which result to click on. So it's important to use high-quality titles on your web pages.

Title tags can't be too short or too long. If they are less than 15 characters, it will hamper search engines ability to understand what the content is about and decreasing the likelihood of ranking. But having them too long means the reader can't at a glance see the contents of the page. So make your title tags long enough for search engines to recognise, but not too long that you aren't able to intrigue potential visitors to click to your page.

Have distinct, descriptive titles for each page on your site. Having the same title tag on each page makes it impossible for users to distinguish one page differs another. So make sure each page titles descriptions are truly descriptive. Because the meta descriptions aren't displayed in the pages the user sees, it's easy to let this content slide. But high-quality descriptions can be displayed in Google's search results, and can go a long way to improving the quality and quantity of your search traffic

Avoid keyword stuffing. Do not stuff keywords in your page titles in the hope of increasing your Google page rank. This is a bad, bad idea.

Brand your titles, but do it concisely. It's reasonable to include some additional information about your brand in your page titles — for instance, "Creators Course - Joseph Strid" But consider including just your site name at the beginning or end of each page title, separated from the rest of the title with a delimiter such as a hyphen, colon, or pipe.

Use heading tags to emphasise important text

Use headings sparingly across the page. Best practice for the use of heading tags to only use one H1 element and H2, H3, H4, and H5 heading tags where they makes sense.

Create alt tags for all page images

Alt tags are probably the great forgotten but incredibly useful HTML element. Forgotten because they’re often hidden away in CMS interfaces, but incredibly useful because:

They make images—a form of content that those with no or poor vision can’t normally enjoy—more accessible (because screen readers can read them). They give you another place to work in keywords also so be sure to add descriptive alt tags to your images making sure they describe the content of the image in a way that lets people with poor or no vision "see" them.

Google

Monitor Site Bounce rate

Biunce rate is a great metric to track. It shows you how well your site performs.

A bounce is a single-page session on your site. In Goole Analytics Bounce rate is single-page sessions divided by all sessions.

Defining Bounce Rate

Bounce rate is the percentage of your user site sessions where users viewed only a single page.  A bounced site visitor triggers only a single request to the Analytics server.

A single-page website session has a session duration of 0 seconds. Since there are no clicks after the first one Analytics can not calculate the length of the session.

According to Google: A bounce is a single-page session on your site. In Analytics, a bounce is calculated specifically as a session that triggers only a single request to the Analytics server, such as when a user opens a single page on your site and then exits without triggering any other requests to the Analytics server during that session.

Google Analytics Hits

Google Analytics records interactions as 'hits'. A hit gets recorded for each interaction where data's sent to Analytics. Interactions that register hits are for behaviour such as a user loading a page on a website or a screen in a mobile app.

The dimensions and mtrics that get populated by hits are: UsersSessions, Pageviews, Page URL, Page Title, Screen Resolution, Browser Language, Operating System… etc etcsent to Analytics. Interactions that register hits are for behaviour such as a user loading a page on a website or a screen in a mobile app.

Behaviour that triggers a bounce

Google Analytics records interactions as 'hits'. A hit gets recorded for each interaction where data's sent to Analytics. Interactions that register hits are for behaviour such as a user loading a page on a website or a screen in a mobile app.

Bounce Rate Rule of Thumb

As a rule of thumb, a bounce rate in the range of 26 to 40 percent is excellent.

A bounce rate of 41 to 55 percent is roughly average. 56 to 70 percent is higher than average, and anything over 70 percent is disappointing for everything outside of blogs, news, events, etc.

How to Lower Your bounce Rate

Google Analytics records interactions as 'hits'. A hit gets recorded for each interaction where data's sent to Analytics. Interactions that register hits are for behaviour such as a user loading a page on a website or a screen in a mobile app.

Resources

Sign in to your Google Business Profile

Edit your business listing on Google.

Guidelines for representing your business on Google

Create a short name & URL for your business

A bounce is a single-page session on your site. In Goole Analytics Bounce rate is single-page sessions divided by all sessions.

Quotes

Internet quotes

My rule of thumb is build a site for a user, not a spider.
— Dave Naylor (@DaveNaylor)

Google only loves you when everyone else loves you first.
— Wendy Piersall

Successful SEO is not about tricking Google. It’s about PARTNERING with Google to provide the best search results for Google’s users.
— Phil Frost, Main Street ROI

Today it’s not about ‘get the traffic’ — it’s about ‘get the targeted and relevant traffic.
— Adam Audette

What gets measured gets improved.
— Peter Drucker

Signup

Creators Compendium

Get the latest tools, ideas, insights and inspiration sent by me.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.