It is undeniable that building a website will be the same as building your own house, you will need to choose the right concept, set the structure and then prepare all the necessaries and materials before starting.

Prepare Content

In the online world, your website is central to all online marketing activities and content is the biggest marketing tool on sites. It is unarguable the important role of content in helping achieve your firm’s marketing goals. 

In order to raise search engines ranking and converting visitors to customers on your pages, it’s crucial to have a solid content strategy in place. 

These are three important parts of the content creation process that you should keep in mind: 

• Understand customer needs: Craft content that brings value to customers or addresses customer needs directly and influence them to take action.
• SEO optimized: Focus on the keywords in your content, it is the door that customers will open to get on your page. 
• CRO/ LPO optimized: Focus on the Headlines as David Ogilvy, one of the greatest marketers, has said, “On average, five times as many people read the headline as read the body copy. When you have written your headline, you’ve spent eighty cents out of your dollar”.  The next stage is the body text which is your chance to get ‘closer’ to the deal with prospects by making a connection, understanding customers' pain points and influencing them to take action emotionally.

Prepare Images

Images can deliver product information faster and better, especially in the e-commerce field. Thus, if you participate in this market, let’s spend time to prepare your images carefully. 

What you need to pay attention to is the size of images that make them display perfectly on all devices and will not slow down the page loading speed. 

Here are some recommended methods by JSN PageBuilder 4 developers to help users have the best quality of images on a page:

Choosing the right image size

Image dimension

• Pick the image size that is closest to the actual presentation on the website. For example, the image size should be set up to 1600px if it is used for the background of the section or 600px for an image or in a small column.
• Images should NOT be scaled up, only scaled down to preserve the highest possible quality.

In order to view image information, you can use Google Chrome addon since it allows you to get information of the original image.

Choosing the right image format

There are 3 primary image formats that you can consider to use: 

JPEG, JPG

Use JPEG or JPG format when images are having a lot of colours and less text, like photography. The file size will be much smaller than PNG. For example:   

Note: But keep in mind that this format doesn’t support transparent background, while PNG does. 

PNG-8

When images are having lots of text and less colour, you can use PNG-8 which is the 8 bit PNG version. PNG-8 is approximately 10-30% smaller than other bitmap formats like JPG. 

For example:

Also, this format provides a much sharper text presentation.

Note:

The other versions of PNG which are PNG-24 and PNG-32 not recommended here since these versions will retain the amount of information much more than PNG-8. Thus, it will create a larger file size.

GIF

GIF is an acronym for Graphics Interchange Format which uses a lossless data compression technique that reduces the file size without quality loss. GIF files are commonly used on the internet, along with these above file formats.

GIF format should be used when:

• You want to create web animation. GIF images will hold all of the animation frames and timing information in one single file. Some image editors like Photoshop make it easy to create a short animation and export to GIF file.
• You need transparency. GIF images have an “alpha channel” that can be transparent, so you can merge your transparent image on any coloured background.
• You need a small file. The compression techniques in the GIF format allow image files to shrink tremendously. For very simple icons and web graphics, GIF is the best image file format.

For more information, you can take a look at this article.

Image optimization

Since Image optimization helps in improving page load speed, boosts websites’ SEO ranking, and improves user experience, you should consider using one of the following images compression tools depending on an operating system you are using:

• For Mac: ImageOptim
• For Window: PNG Gauntlet
• Online Tools: TinyPNG, TinyJPG, EZGIF

ImageOptim

Bellow is the optimal settings recommended by the Joomlashine team when using ImageOptim.

General

Enable compression options as shown above.

Quality

Configure settings as following:

• JPEG: 88%
• PNG: 80%
• GIF: 80%

PNG Gauntlet

Bellow is the optimal settings recommended by the Joomlashine team.

Ezgif.com

GIF optimize

You can use an online tool if you don’t want to download any application.

• Visit https://ezgif.com/optimize
• Upload your image or put the image URL.

• Set the Compression level to 150

Corrupt GIF Repair

If the GIF image is broken/corrupt, you can follow these steps below:

• Visit https://ezgif.com/repair
• Upload your image or put the image URL.
• Choose the option “Reset colour tables”.

Set the right image name

Since the Media Manager allows you to control all images on your sites, you should have proper image naming to make it easier to manage them. 

Pick a name that matches the image content best and set it in the following format:

• {page_name} {numeration}

For example: Homepage1

Prepare Custom Fonts if needed

JSN PageBuilder 4 supports Google fonts from Serif, Sans Serif to Handwriting. In case you would like a specific font for your page, please prepare your custom font before creating a page.

Tips:

Normally there should be no more than 02 fonts on a site. Read more.

References

• https://engageinteractive.co.uk/blog/how-many-fonts-is-too-many-fonts
• https://99designs.com/blog/tips/image-file-types/

Next Chapter:

Chapter 2: A Quick Tutorial to build Page Structure