• Jan 4, 2021

Concepts to master for your website

One of my clients suggested I download a chat App so he could send me his full-length video. That event became the catylist for this article. With all the noise and distractions out there, what are the main things that would help people contribute to their website in a meaningful way? What are the core skills needed or concepts required to add value to your website? Our version lists 18 essential concepts to master your website.

We have created a list of stuff to know for your website, making no assumptions about your level of IT skills.

People will put an image on their site that is over 1 MB in size, yet that image is often viewed on a mobile phone with a tiny screen.

So we have picked the must know technologies and concepts to get more out of your website. By having a better understanding of the core technologies behind it, you can make better content choices. "Content is King".

Naturally you can build on these essentials and may already have far more depth than presented here.

Inspired by Andrew Keen's book "How to Fix the Future" if you see a problem go in and fix it, our 'second brains' are getting smarter (phones etc) but we are still running the show.

1 Where are files located

Your phone, your camera, your tablet, your PC (devices) will have a file system. If you download a file from the Internet they have to go somewhere. The issue is where.

You can leave your devices file system set to the default or you can create your own directories to place files in. Often PCs will have a subdivided or even different physical hard drives, so that if your operating system has an issue you do not lose all of your valuable business files.

If you have a good back-up system in place you will have copies of your valuable files stored in a separate retrievable location.

2 Screen sizes pixels

Every device's screen displays dots at a certain number per square inch. The number of dots in a magazine may be 1400 per square inch. The number of dots on a PC may be 72 per square inch.

The dots on a screen are called pixels, so a typical 23 inch computer screen may have a resolution of 1920 * 1080. An iPhone depending on its version with have a certain number of pixels for display.

Hence we never make a website to fit only only one device, we make the website responsive so it responds to different sizes and displays well.

Print is easier to comprehend than digital text. Yet we still see pages with text the entire width of the web page. If you get one take-away from this read, avoid text that is the full width of a page. Refer Chunking

In a website you can even set rules for how items are displayed on various screen sizes or whether they display at all. refer CSS

3 Understand graphics Jpeg SVG PNG

Certain image formats are suitable for specific tasks. Most images have a set resolution (certain number of dots). Images may also have compression, which allows the image size to be smaller, but the image may still be a set number of dots.

JPEG images are common on phones and the web. Software like Adobe Photoshop can give you options in pixels and compression for your images. So using photoshop you can get a balance between your original image and what will still look good on a website, hence no need to have a 1 MG image.

Vector images will stay crisp as they scale. SVG images are used more and can for example make your logo look crisp no matter what it is scaled to.

By knowing basic image formats, you can make informed choices on what to store a photograph (JPEG), or a diagram (PNG), or a logo (SVG).

4 HTML

HTML is the code (mark-up language) that is a webpage.

Just about every webpage renders to HTML, simple code that allows images and type to be displayed. You can set headings, bold and other formatting.

refer HTML5 improving SEO and Social Interaction

refer HTML vs. HTML5

5 CSS

Cascading Style Sheets (CSS) allow you to set formatting rules for your pages. So instead of writing a specific set of instructions for each page, we use CSS to set the rules across a site.

Bootstrap for Design elements

CSS allows magic to happen so a link will look a certain colour. Systems like Bootstrap are advantageous because they come with a certain core set of instructions that you can build upon. So rather than make every site with its own core set of design principles, Bootstrap allows consistency across many sites. On top of the Bootstrap core code may be some more detailed instructions on the specific look for a site.

CSS simply allows design styles to be integrated easily and consistently. A client requests larger text size across the entire site, no problems, you can set a few numbers in the right location and check the results instantly.

6 JavaScript JQuery

JavaScript allows you to program on the web page. When a web form is submitted it is usually JavaScript that checks whether the values are valid.

We can do some amazing things with JavaScript like make checks to a database via a programming language and return the results directly and seamlessly to the page.

In our Shopping Cart we can calculate the estimated shipping costs on the spot without leaving the page or refreshing the page.

7 Database

Every dynamic webpage has information coming from a database.

A static webpage usually has a .html extension. A dynamic page can have a variety of extensions or none at all. Essentially the information is retrieved from a database.

A website with a database, usually a MySql database can store information in a special structure (relational database) that maintains integrity of the data. If you sell a product to a customer, you would naturally have a table for a product and another table for the customer. If you went to delete a customer and they had an existing order, a well made database would prevent that so that the integrity of the data was maintained.

8 Programming languages

Programming languages like Java and PHP connect and serve up pages from the server.

You write code to perform certain functions on the website. In our Shopping Cart we write logic for how a freight may be calculated. By using a programming language we can account for many scenarios without explicitly coding the answer for each. We create an algorithm and code reusable components to address logic. The Java programming language has the enum class that represents a group of constants. These can be mapped and efficiently accessed without error prone code.

9 SSL

SSL is short for Secure Socket Layer, and it's a standard type of data encryption technology. If you use your credit card over the internet to connect to a Payment Gateway, the site must have SSL encryption to be safe.

10 Hosting

Your site must reside somewhere. Usually a web host, that stores the above mentioned components of a website.

We think the domain of the web host is for experts. The issues with hacking and spam require a skilled host to protect and recover your site should there be hacking attempts.

Every second of every day there is a hacking attempt at our web servers. If this were a house you would see a person attempt to break in every second. Most are auto scripts fishing for vulnerabilities. Occasionally one will be disruptive. We need to know via logs and other security measures what these attempts are and act on them.

Database connections are finite. By monitoring connections and the applications accessing them you can build defences against disruptive hacking attempts.

You need a good relationship with your hosting mob, they are experts in their field and can assist you in maintaining a secure website.

Files are transferred to a web host via FTP - your web developer transfers the files to a file system on the server.

11 Email

Developing effective email strategies can really benefit your business. You need to know the difference between an email alias, POP3 etc just so your email actually arrives reliably.

Often you will separate your web hosting from your email. This can be done in a variety of ways. Email specialists are worth consulting to ensure you have reliable email and someone with hands on help should anything go wrong.

Sending effective subscriber emails from your website can really enhance your business.
Refer our Business Email Tips

 

12 Domain Name

Register your domain name with a reliable registrar agent. It has to have your business entity as registrant and use an email that will reach you should your domain expire.

Never allow your "designer, marketer or web developer" to put the domain name in their name. If your business relationship sours a skilled web developer will always be able to reconstruct a site for you. However if you lose access to your domain name valuable SEO and IP may go down the gurgler.

 

13 Lines of Communication

There is a set formula for lines of communication. Essentially the more people involved in a project there becomes an exponential rise in the lines of communication involved to keep everyone informed.

For your site to prosper we recommend a small highly skilled team. There are less lines of communication required and a direct link between those wanting the site and those creating it.

If you have a marketing savvy web developer you can effectively communicate with, you will be better off than a larger team needing to disseminate information amongst many people.

Lines of Communication Formula

14 Understand video

A video is essentially a bunch of images at a certain size and number of frames per second (ffs). These rapidly turn into large files, depending on the length of the film.

When it comes to the web, the best delivery option for video is YouTube or Vimeo. These platforms will hold your video and essentially manage it for you.

Both YouTube and Vimeo will evolve, however because these platforms process and store your video for free, you are not paying for the download of the videos.

If you need to send the raw video from 1 person to another one option is a file transfer platform like WeTransfer.com - you can send up to 2 GB free and only have to validate your email to do so, you do not have to "join". You can even do this from your mobile phone if you have access to your email on that phone. Just go to WeTransfer.com in your phone browser, select the files, enter the email you are sending to and your email address, you will be sent a verification code which you enter and your done!.

Read our guide to Web Video Marketing

15 Audio

Audio is played on the web by mp3 files. Audio can add an extra dimension to your pages and blogs.

Here is an example of audio used effectively on a Couples Therapy website.

Useable audio is everywhere, you do need a quality microphone, forget most phones and cheap PC microphones, a dedicated recording device that can create WAV or MP3 files is needed.

16 Copyright

Copyright is an automatic right assigned to the creator of any piece of original work.

You do not have to state the word © Copyright for something to be Copyright.

If someone accuses you of infringing their copyright you should immediately determine if you have violated copyright and if so act to remove that object. For example you have been sent an image for a website and later learn it was not owned or created by the person who sent it. If you act immediately you are aware of this infringement there is rarely any redress. This is not legal advice, this is common sense and generally what happens in practise.

As a web developer we use subscriptions to professional image libraries - we don't steal other people's work.

 

17 Chunking

The key to successful BLOGs or News Articles is presenting the information in 'Chunks'

A User Interface Design concept chunking relates to breaking information up into bite size chunks so it can be read easily - much like a newspaper. Arthur Miller asserted that humans can absorb +-5 pieces of information, chunking allows information to be placed in digestible batches.

Pages should be created where people can gather the meaning by scanning the page. Numerous studies indicate people rarely read a full webpage, they scan it. Eye tracking studies indicate there is also generally a hierarchy of where people scan - often from the top left in a curve to the bottom right. Placing important information where it is likely to be seen makes sense.

18 Appealing to Emotions

We often do not know the path of arrival of people to a web page. In many ways you are attempting to create a relationship with your visitor. Saying hi subscribe now is not a good way of starting a relationship, imagine walking down the street and asking every person you met to sign up to your site?

It is often emotion that triggers a sale or an action. Someone has an issue and you offer a solution.

• Fear of missing out
• Stories that inspire
• Provide a face people can relate to
• Build trust

19 Refresh your Browser

Your website may have had a page updated but when you go to view it you see the old page. Refresh your browser to remove the old cached version.

Firefox, IE, Chrome Ctrl + R

Safari Command + Shift + R

20 User Data Tracking

Cookies are stored text that identifies a visitor to a website.
Geolocation is your approximate location a search engine may use to alter the search results.
Search History is stored in your browser and lists the sites you have visited.