Webdesign tips

An excellent website….

What makes a website a real good website ?

Internet security, privacy protection, web safety, web design Information for web designers, site owners and web masters by…..

A list of issues – split up in categories – to take care of, when building or improving a website. ———————————————————————————————–

First of all it’s absolutely needed that the site is CLEAN, which means free of all kinds of malware. For that a large amount of checking tools is available. One of the best is >> > URLvoid  

In fact this is a “link farm”  and that means that a lot of scanning tools are brought together and give you a quick overview.

FYI : It can happen that a few scanning tools in that list are a bit over-reactive and show a detection. That doesn’t automatically mean that a site is unsafe, it’s only a reason to check further into details. For that you can click on the tool itself to find more info and sometimes you find out that it’s possibly a “false positive” or something unimportant.

If you still have doubts or you’re curious to learn more than a few other scanning tools are available. BTW : some of them aren’t connected to URLVoid and operate independent, so it’s wise to check with these too.

A very good alternative is >> > Virus Total , this scanning tool offers both the possiblility to scan a file or script on malware and such, as well as checking a website on various dangers. In the opening home page you can select your choice.

Another good tool is >> > Unmask Parasites , which gives info on some additional subjects.

And finally I can advice the use of the  >> >Phish Tank to check on sites with phishing methods. A very helpful tool  that gives direct result.

*And for the fanatics among us :  On >> > Quterra you can find more in depth info. A very detailed scanning tool and also part of URLVoid. This one is unfortunately taking some time to carry out a check. But to be honest : Is an infection worth risking, that means even more work !

There are many more scanning tools, but in general this should do.

If you need more information on scanning tools, please let me know through the page >> > Contact and ( hopefully ) I can be of help or assistance.

Important note : If the reputation of the site isn’t optimal on this safety subject, stop reading the rest of this story and fix that before you go on …………

**Note : I’ve heard from an Englishman who works for a well known inter net security company that a good tool to protect your site is >> > ZB-Block 

And Sucuri can also be very useful : >> > SUCURI 

When you,re adapting the – much used – CMS WordPress, installing the plugin “All in one WP security” is recommended. It protects against attacks and gives suggestions for safety improvements.

In a virtual indicator clock in the WP Dashboard (the “admin”) you can see what the results of your actions are. The more “strength” indicated, the better. And with this tool you can also create an extra block against unauthorized login attempts.

Job done ? Are you sure the site is clean, than read further and find out ……………


Tips and tricks – Here we go ……………

1 – Additional security measures :

– Place a picture, logo or cartoon in the upper left corner of your contact page. Thumbnail size will do. ** Why ? Botnets are constantly scanning the web to find visual- and e-mail addresses and telephone numbers for spamming and telemarketing. Botnets read like we read a book, from left to right, beginning in top and get stuck in all the data of the pixels of an image in the upper left corner, so you create a barricade.

E-mail_button– For the same reason it’s better to put your E-mail address behind an E-mail button. Those are for free available on the internet. E.g. this one works well.

Computer hacker– Not only botnets scan the web, hackers also do personally and now they can’t read that, because it isn’t published openly.

So you force them to do an extra step, clicking the button and that might perhaps help a bit.

– Place a “NO SPAM” logo on the contact page. With that you show that spam is unacceptable and will be deleted immediately. It’s function is no more than bluffing, but gives a signal.

– Install and activate an anti spam plugin. In WordPress.org “Akismet” is common used and effective.

– Use a Captcha in your contact form, to be sure to get messages from humans only.

– Respond to real messages from the contact form. If hackers send a test message and no reaction comes back or nothing is deleted, they know it’s a “sleeping” and bad mastered website, hence an easy target to attack.

– Minimize the amount of links that redirect from your site to other websites. Internal links to other pages within your site to hold your visitors tight are okay ( see “where is the banana”), but external links can make a “link farm” of your site, which causes an enormous stream of cookies to your visitor, because your site is embedded in some kind of spiders web.

Lightbeam webcardLightbeam logo**That already happens – more or less – even without you placing links. You can check with “Lightbeam” ( an improved version of former Collusion ) which sites are connected to your site or the sites you visit.

**This is an example of what Lightbeam displays on your screen. What an eyeopener which sites are silently following you…………

Lightbeam screenshot

– Don’t make use of pop – ups, especially when they directly appear in front of the home page. If you want to chase away your visitors, this is a perfect method to make them leave immediately, because it’s very annoying. BTW : In general visitors don’t appreciate pop – ups, it’s an obtrusive way to force people to pay attention to a subject they’re NOT interested in.

– Using pop – unders is mortally. In fact this is by definition malware, because it’s hidden and a forbidden infringement of the visitors privacy.

Wordpress logo 3– Make sure you work with clean coding. The – worldwide most popular – CMS WordPress is very good in that.

– Update the plugins frequently to have the latest security versions.

– Never use an external website as a page within your site. That website is – either good or bad – mastered by someone else and you never know what you’re introducing within your site, where you have NO control on.

– Cookies : Of course most sites use them. But avoid using session cookies, that’s bad for the reputation. Tracking cookies and LSO’s (a.k.a. super cookies) are not appreciated for their risk on privacy loss. Tracking methods are more and more common, but close to phishing and considered illegal.

**By definition tracking cookies can be harmless though : “Online Tracking” simply means that the site uses cookies that do not expire after you leave the site. Nowhere does it imply that a site is not trustworthy, or performing an unethical act.” But still……..

– Note : Since May 2018 new rules and directives are applicable for the use of cookies in the entire EU. For more info read the blog of 23 November 2017 on the page : “Spams / Scams / News blog”. The fines on violation can – in cases – be huge and related to the turnover made with a site. For example : Large webshops have something to worry about if they don’t adapt to the EU rules and directives, while e.g. the local village chess club will only receive a warning and notification to fix a minor issue.

No SPAM logo

No SPAM logo

– Using bulk mailer plugins like “Mail chimp” to post newsletters isn’t advisable and must at least be limited in amount and frequency to avoid the risk of getting accused of spamming.

2 – Juridical issues : You need…..

– An approved Privacy ( and cookie ) policy, which is “juridical waterproof”.

– … to announce by law in some countries that you use cookies. But when that’s mentioned in the PP (Privacy Policy), that should do.

– A disclaimer that indemnifies you from claims. DO THIS ! It can safe you a lot of money and / or trouble.

– An Acceptable Use policy when you create the possibility to give reactions or when you use a forum. Or “rules for guest posters”.

**These four can be found on my page : >> > Terms & conditions

– Forum guidelines if not already included in the Acceptable Use Policy.

– A T.o.S. ( Terms of Service ) when you’re selling products or services, like e.g. with a web shop.

– … to announce a visual address on a contact page, unless you have good reasons not to do, e.g. safety precautions. Like needed on this site, after all …… hackers and other cyber scumbags aren’t fond of this site about internet safety.

– … to publish a visual address in the Whois register, unless you have good reasons not to do, e.g. safety precautions.

Important remark : Don’t place your cell phone / mobile number on the contact page and in the Whois, unless it’s absolutely needed for whatever reason. Better use a landline number, those are already public because they can be found in a phonebook or on the web. Keep your mobile number to your own circle of family, friends and other trusted contacts. This avoids phone calls from dodgy marketeers, annoying call centers and other unwanted rubbish you don’t need. All these calls can drive you crazy while at work or whenever.

– … to add that the content falls under copyright. Usually that is mentioned at the end of each page or in a footer that is automatically shown below each page. *You don’t want to find out that others run away with your valueble content, do you ?

3 – SEO – Search engine optimization

– Install and activate a SEO plug in. In WordPress.org SEO – Yoast is good.

– Use a short title for your site ( in the meta tag ). Titles with too many characters are only partly shown in search engines. Fictional example : When you are trading in camels and you own a company that you gave the funny name “Camellia“. In this case the website title in the metatag could be “Camellia, specialized in the export and transport of quality camels“. But this is too much, because a search engine doesn’t show that completely and only displays “Camellia, specialized in the export and transport of…..” And that’s where it ends ! ! ! In this case the first view doesn’t make clear in the search engine what the site really is about. And FYI : Camellia is a plant and absolutely something else than “the ship of the desert” (a camel). Better is to use the title : “Camellia, the camel specialist“. Here you directly see the keyword ( Camel ) and what the site is about. Don’t forget to put that keyword in Seo – Yoast ! It’s also a good idea to use that keyword several times in the homepage, 5 to 10 times is advisable. Just as long as it doesn’t sound and look odd, because than it’s overdone.

– OTOH using the keyword of a page too much will be punished by search engines – like Google – in the most recent algorithems, by downgrading the site in the search results. Ten times, to maximal 12 is optimal and more is overdone. Also count the keywords to that which are hidden in the piture info, as search engines find those. See later below about picture info.* SEO Yoast in WordPress gives a lead if your page SEO is optimal and guides you to improvements.

– Search terms exist more and more of several words these days, a sentence instead of one word in the past. Adapt your text to that. Easier said than done, but try to place yourself in the minds of your visitors. What should they be looking for and how ?

– To be found, a minimum of 300 words per page is needed for Google.

– Optimal page size is from 500 to 1500/2000 words.

Google logo– Google only finds text and doesn’t “see” pictures. To solve that you should adapt the “exif” information of the picture, it’s btw also a wise thing to do for safety / privacy reasons. The “Description” of a picture in WordPress is for SEO ( and “Alt text” is for blind people who use spoken text features ). That description is mentioned as “Associated text” and that is what the search engine crawler finds. Here you can use the “keyword” of  the site also, as long as it makes sense of course. Remember that using the keyword in the text of the site too much can look silly. Keywords “behind” a picture, a logo or a banner aren’t visual on screen and have no influence on the looks of your site. But they do make the difference, you’re easier to find for search engines.

**Exif information of a picture on the inter net can be read by everyone, by just right clicking and selecting “Picture info” ( or sometimes it directly appears under the mouse arrow ). And you don’t want scary people ringing your front door, do you ? That’s why you need to give the picture a name in your hard disc files that’s harmless for your privacy and says nothing to someone else, before downloading that to the site. Always check that and – if needed – rename them and store them in a seperate file called “Website pictures”. Once you’ve brought it to the “media library” in  WordPress, you can NOT change that any more. The description in the “Associated text”  is additional. And when you don’t fill in that, the file name is shown for the second time…..OOPS ! This video will convince you to take the necessary precautions : >> > You Tube

– Categorize the site. It must be clear what the site is about, the first few words in the first sentence are displayed in search results. With these words you catch visitors in Google pages !** E.g. the category of this site “Internet safety and privacy protection” is displayed in top of each page below the avatar. * Note : In the WordPress[dot]org version you have to fill that in on two places, in the Dashboard in “Messages” and in “Portfolio”.

– Add tags to the site, that’s something else than categories. But the purpose is the same, to be found better. ** E.g. in the theme I’m using for this site ( Costumized Ryu ) it’s only displayed on the Home page in the top left corner. For a search engine that’s fine. * Note : In the WordPress[dot]org version you have to fill that in on two places too, in the Dashboard in “Messages” and in “Portfolio”.

– Page titles must be short and clear and express the subject of the page.

– A page must contain no more than one subject. “My blogs” can also be the subject, though it may consist various items with different content.

– Don’t try to fool search engines with the use of a lot of separate words, as a way to be found better. This is an old fashioned trick and not effective. Google and others detect that, even if hidden somewhere and downgrade your site in the search results as a punishment.

– Create a “site map” and display that somewhere on the site. A link in the footer to a seperate page with that site map is possible when you have other subjects like Terms & Conditions, Privacy, Contact and About Us in the footer. But it can also be a list at the end of the home page or so, variations are possible. Some web designers make a scheme of that with visual connecting lines and such, but that’s only optional and more difficult to find for search engine crawlers. More about the site map in the next chapter below.

– Important ! Don’t forget to report that site map to search engines like Google. In fact that’s most important for SEO, even more than putting the site map on the website itself.

– Some good tools to check if you did a good job on SEO :

Note : This is NOT the Yahoo service “Smushit”, that one isn’t active anymore. And was the source for the same service by WordPress, which obviously also doesn’t work anymore.

4 – Miscellaneous / general

– Homepage : You have max. 10 seconds to draw the attention of a visitor and to catch them. The first 25 to 50 words in 2 or 3 lines is the first impression of your site and has to make a visitor curious. If not, they vanish and hop to another website.

– That first impression must make clear what the purpose of your site is. So don’t use a sentence like “Welcome on the site“. Of course every visitor is welcome on the site and hence this looks polite, but it’s useless, unprofessional and distracting.

– The lower edge of your screen is called “the fold” of the page. On the homepage it’s important that the first impression is displayed above that “fold”. That part of the page must catch the visitor directly. You have to make people curious in a split second and pull them in. Large banners or pictures which fill the space above the fold, force visitors to scroll down to the text, to find out what the site is about. Web designers say : “Everything below the fold is out of screen and with that perhaps not seen”. Internet is a volatile medium with impatient people who “surf” to another site or back to the search results when they don’t find directly what they’re looking for. Keep in mind that the “fold” on tablets and cell phones is even higher up on the page, on these devices the first visible part is smaller. Adapt to that !

smiley-rating-4*Tip : Some humor in the first lines of text on the homepage can help, this is an underestimated factor that gives people a pleasant feeling and can make visitors stay on your site. Surfing must be fun !

– KISS ( Keep It Short & Simple ) is important in the main menu, follow up of pages and site routing. *Remember that on tablets and cell phones that menu is displayed separate in a small “drop down” list. So keep it to the point and small for those compact screens.

– The main menu shouldn’t contain too much pages, absolute maximum is ten. *See “Download speed”. Better make sub pages if you have much content. Too much pages in top make it confusing on screen, a good structure is needed.

– The site map ( a.k.a. known as site routing / – scheme or – menu ) must be logically organized. Common use is the “Home” page as the entry page and the “Contact” page in the end. But this rule isn’t an obligation, variations are possible.

– Footer : If you have one, put all juridical fuzz in that. Otherwise make a special page for this, that can also be a sub page of the “Contact” page, if your main menu is “overcrowded”.

– Search bar : If you have one, take care that it’s activated and works properly.

– All links on your site should open as an external tab. With that your site page remains open in a tab and that gives your visitor the chance to easily return to the page of your site where they came from.

– About the links itself : Make sure those links are “easy clickable“, which means that enough space around a link is needed. Especially on small touch screens where people use their fingers in stead of a mouse arrow, this is important. Nothing so much annoying as being directed to another website than you prefer. A site must be user friendly, right ? *To be honest, I made the mistake myself on the home page and fixed that after testing my site on a smart phone. Tip : Using small clickable buttons of thumbnail size is an advantage on responsive sites, which most of them are these days.

– Some web designers make use of link buttons everywhere. It’s a choice, but if you do, than apply them consistently on all pages of your site, to make visitors get used to that and not confused. It shouldn’t look silly btw. , in some cases it can be too much.

– Keep the screen peaceful. Too much clutter on screen, too many columns, blinking advertisements and widgets in the sidebars with e.g. external links, create confusion and makes it unpleasant for visitors. They lose overview and won’t come back again.

– Some sites have a widget with testimonials. It can be useful, but opinions about that differ. After all it can also be confusing on screen or create less trustworthiness, because it’s overdone. A good site itself must create trust……..

Laughing banana cartoon– “Where’s the banana? “ This means that you shouldn’t leave your visitor unattended at the end of a page. There they need to find a reward for reading the whole content. That can be a link to another page with similar text or follow up.

– Make it easy to switch from page to page. Here KISS helps with a simple main menu. Same goes for the site map.

– Download speed :

**Over sized pictures cause long download time, so resize them to the optimal size for that theme. Avoid pictures of > 1 mB with many pixels. Resize to 600 – 700 pixels width and max. about 1000 pixels with the height belonging to the width, mostly 2/3. But in most cases the heights changes in proportion with the width automatically when you resize in %.

How to do this : When I want them full screen, I always resize the pictures, cartoons ( or whatever, other than text ) on my pages to a little bit more than the width of my site.
Example : My company sites are made with the theme Avada Child and have a width of 1100 pixels. If you place a picture in high resolution of e.g. 4500 pixels ( = about 4mB ) on that it will be reduced to that 1100 maximum. ** Note : But only if the site is made responsive, otherwise it doesn’t fit at all and you will get an error. ==> I had this in the past when working with the old fashioned and not responsive CMS “Flash”. Don’t use that anymore, also because it doesn’t work on Android and OSx software.

Oversized pictures carry far too much pixels with them ( = too much kB data ) and that counts double squared, horizontal x vertical. The picture isn’t shown any bigger, but the download speed of your site reduces dramatically with having so much kB on board.
Example : When you reduce a picture of 4500 pixels in a new size of 25% it will go back to 1125 pixels and on the site that’s still shown full size (= max. width of 1100 pixels ) on screen. But the size of the picture in kB has been cut down to 1/16th ( = 1/4 horizontal x 1/4 vertical ) and hence download speed improves much, 16 times to be precise ! ! ! While the picture on screen remains the same.

I had a report from a far away country that my company sites download on screen in two seconds ! , Whhaammm, that’s fast ! The result of adapting techniques like this, even though I use many pictures on full screen size. And the positive side effect is that visitors don’t have to wait long and don’t surf away because they get impatient or bored. Like said before, you have to catch them in a split second.
Something to think about when you use many pictures, cartoons, (road)maps or so..

You Tube logo**Video films, like You Tube should be a link to an extra tab / page. If they’re embedded in the website it also reduces the download speed dramatically.

**Text content isn’t the biggest issue. But it’s better ( also for the SEO ) to split up enormous amounts of text in several pages that follow up each other and are connected with a direct link (a “bridge”).

**But too many pages – on the other hand – also reduce speed. So this is a matter of finding balance.

**In the CMS WordPress.org you can install and activate the plugin W3TC that improves the download speed a lot. Note : The .com version of WordPress doesn’t have the possibility to implement plugins.

– “Unite your site”, which means that you need to connect pages and make them easy to combine. With this you keep visitors inside and happy. here again, building internal “bridges” is important.

– “Responsive” : This function ( “one size fits all” ) takes care that your site adapts to the screen size. More and more people visit the web with their smart phone, tablet, or hybrids of these two and that’s a complete different size than a PC or lap top. * Some webdesigners call this function “Comprehensive” b.t.w. , but it’s the same.

– Use a friendly and polite tone in your text, avoid situations that can lead to a conflict. A straight opinion ? Okay, but brought in what way ? And is it really necesarry ?

– Some humor can also make people happy and visit your site more often. Making them smile is better than making them angry………..

– Background colour of your site : Perhaps you don’t realise, but the colours on your site and – most of all – the background under the text can make a great difference. Most people are “surfing” on the net in the evening and if you’re capable of keeping them awake, they hang around longer on your site. From some studies it appears that bright white and blue coloured light both reduce the production of the “sleep hormon” melatonin. This is the reason that doctors advise us to shut down the computer at least one hour before going to sleep. And I must say they’re right, it helps to calm down your mind.

Note : This site has a bright blue background, that’s no coincidence………….. A friendly, but fresh blue colour, chosen with care. Not screaming, intense blue, because that’s unpleasant to read and causes pain in the eyes.

You can read more about that subject on this site ( though with somewhat overdone text, don’t get scared ! ) :

>> > Link to Gigaom page

Tip : Software that helps by adapting to the time of the day and your bio-rythm at :

>> > Link to F.Lux site


Finally : I hope you could pick up some useful information from this story.

– If you have the feeling that I’ve forgotten something.

– If you have a splendid idea that can be added.

– If you have whatever remark or comment.

– If you have something to ask……..

Please let me know ( through the Contact page ).

I’ll be more than happy with feedback. – Thanks !


Copyright peterswebsafety