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. You can find them in the WOT – Wiki on the information page : >> >  “Online tools”

If the reputation of the site isn’t optimal on this subject, stop reading the rest of this story and fix that…………

**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.

Are you sure the site is clean, than read further.

———————————————————————————————–

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, 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.

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.

– 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.

– 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 WOT we 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 an infringement of your 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 – 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 (super cookies) are not appreciated on WOT for their risk on privacy loss. Tracking methods are 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……..

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.

– 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 ToS ( 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.

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

– … 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 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.

– 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.

– 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 as much as possible, 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.

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

– Using a keyword in a page must be maximized to 10 times. More than that is overdone and seen by search engines, which will downgrade your site directly, by putting your SEO score for that page in red.

– 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 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 is 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.

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.

– 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 seperate 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, 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 ( aka 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.

– Some webdsigners make use of link buttons. 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.

– Keep the screen peaceful. Too much clutter on screen, too many columns, advertisements and widgets in the sidebars 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.

– 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 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.
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. 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.

**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.

– “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 ?

– 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 are 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

Software that helps by adapting to the time of the day 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