In this chapter some special website techniques, a few tips and tricks as well as some general design rules shall be presented and how to best implement them with "Cheetah". However, they are - with exceptions - to be considered only as suggestions and perhaps as a kind of idea generator.
Note: If you reproduce web pages that do not originate from yourself or your client, you must absolutely observe copyright (and possibly trademark rights). This applies in particular to the media incorporated therein (only linking, not copying), any texts and special design features that suggest a certain "level of creation".
Ideally, you use a two-screen solution as the "development environment". On one screen you display the website to be reproduced and on the other screen you display the "Cheetah Sitebuilder" in the same browser. Here you start your work not with a template, but with an empty template.
Furthermore you need some browser add-ons (we will talk about them in a moment), the simple Windows editor, a calculator as well as a (real) notepad with pen for notes.
Let's start with the browser extensions (we assume you are using Google Chrome or a derivative of it). With their help, we primarily get information about color, sizes and proportions, as well as about the fonts used in each case and their sizes and attributes. It is also useful to have a tool that allows us to download all the images used on a web page. There are of course alternatives to each of the add-ons suggested below. So take a look at the Google Webstore to see for yourself what else is available.
1. Extract images from a webpage
With this Chrome extension you can download all (or selected) images of the website in the active tab.
LINK: Image Downloader from Vlad Sabev
The downloaded images should then be uploaded to Cloudinary, preferably in a separate folder per website, and - if not already done - given an SEO-friendly file name.
2. Measure distances on the web page
Whenever you need to measure distances between clearly colored HTML elements on a web page, this easy-to-use Chrome extension is the tool of choice.
3. Define colors
When reproducing a web page, it is important to reproduce the colors of the original page exactly. To do this, you need a tool that determines the color values (usually RGB Hexa) of a pixel touched with the mouse pointer and allows to copy them. Such a Chrome AddOn is the ColorPick Eyedropper, with which it is easy to transfer a color value into the color settings of a "Cheetah" - element.
LINK: ColorPick Eyedropper
4. Designer Tools
This Chrome AddOn is indispensable if you want to measure the size of elements on a web page (images, text containers, etc.) with pixel precision. To do this, you only need to touch the element to be examined with the mouse and a frame with length and width labels is immediately displayed.
LINK: Designer tools for pixel-precise measurement of elements on web pages