Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Friday, January 19, 2018

Tips for Designing and Building a Multilingual Website

Create a multilingual website
English is not the only language out there, so why only design a website with one language in mind

As a modern society, the human race is continuing to grow, expand and connect to one another more instantaneously than ever before. In just a click of your mouse or a tap of your finger, you can be reading about the entire life and legacy of another human being that could have existed hundreds of years ago.

It’s amazing when you think about.

However, with such a connection comes the problem of language barriers. While you might be writing your content in English, statistics show that only 20% of the entire world population actually speaks the language, meaning your website is relatively inaccessible to the remaining 80%, which equates to around 6.6 billion people.

So, to counter this issue, you’ll want to design and build your next website as a multilingual platform that’s accessible to people around the world, or at least your target market. But how you do go about doing this? What problems and milestones will you need to overcome and what features does your website need to include?

To get you off on the right foot, here’s a complete guide to everything you need to know.

Getting Started

To start with, the first thing you’re going to want to consider is not actually the building of your website, but the content itself. You’re going to need to get it translated. Of course, translation services, such as Google Translate, are constantly improving and are updated or a near-daily basis.

However, these services definitely aren’t reliable if you’re looking for a professional finish. Ideally, you’re going to want to hire a human translator to edit and convert your content properly. For this, you have multiple options available.

Firstly, you could use translating companies such as International Translating or Big Assignments to translate your content for you on your behalf. This is of course if you have the budget. If you’re translating hundreds of pages of content, this can prove quite expensive, and you’ll need to find another way, perhaps by hiring someone long-term, such as a freelance translator from Upwork or Ukwritings.

If this is the case, or you plan on translating your content yourself, you’ll need to remember to proofread your content for errors, so your website remains professional. According to recent statistic, 59% of people said that they won't trust the company of service which has errors and mistakes on their website. So proofreading and editing is vital for your business reputation.


Implement Language Change Features

Of course, no multilingual website would be complete without the ability to actually change the language that the viewer wants to read your website in. Most commonly, you’ll notice that a lot of websites use a traditional drop-down menu which is clearly visible in the header or footer of the website.

In theory, you can put it wherever you want, but you want to make sure it’s clear and easy to see as soon as your website loads as people accessing your website will want to change it straight away.

Another key element to consider at this point is adding flag images to your drop-down menu. While this is a graphically powerful element to include, there are a few problems that come with this approach. Most notably is the fact that flags represent countries, not languages and many countries will have more than one official language.

Finally, you’re going to want to make sure that you refer to each language in its own language form, for easier identification purposes. For example, German should be referred to as ‘Deutsch’, French as Français, and Spanish as Español.

Checking Your Readability

You may not speak multiple languages but you can still create a multi language website with the right tools

While you may invest a lot of time in choosing fonts for your website and you’ve chosen one that looks clear and precise for your English readers, it’s important to make sure that the font will still be as legible when it comes to another language.

Sarah Stanford, a translator for Paper Fellows shares...
“One of the biggest problems that trip up multilingual websites up is choosing a fine and relatively small font that went translated, the symbols that appear in certain languages, such as the ‘n’ in ‘Español’ can become unreadable”

To alleviate this problem, be sure to check your character encoding, typically found in the head of your page. If your website is using Unicode, UTF-8 may work perfectly since it supports multiple languages, helping them to maintain their readability.

Reading Line for Line

One of the most common misconceptions that people have regarding other languages is the fact that languages don’t have a reading direction. However, the script in which the language is written in does. For example, Arabic script is read from right to left (RTL) whereas English and other European languages are left to right (LTR).

Of course, the vast majority of languages do read LTR, but if you include language settings for those who read RTL, this is something you’re going to need to consider. To achieve this easily, you simply need to mirror your website pages, which includes everything.

This means your menu bars, your icons, the layout of your navigation menu, the buttons and even the scrollbars will all need to be flipped and mirror what they are usually. Fortunately, there are a number of ways you can do this using basic code which can be found online, depending on what code you’re using to build your website.

Customising Your URL

Another important factor you’ll want to consider is the URL that your website is using when it changes the language. A country code top-level domain, more commonly referred to as ccTLD, are all linked to specific countries. For example, .fr is France and .es is for Spain.

This is such a vital part of the process that you’ll need to remember to complete since this is how search engines will help users to find the content they’re looking for. If you don’t implement it, users won’t be able to find your website easier. Of course, this will eat into your budget, but the ROI is worth it in the long run.

For more information on using ccTLD, as well as for your sub-domains and sub-directories, check out this Google guide on the matter.


Creating a Multilingual Store

If you’re creating a blog with content, this point may not concern you, but if you’re creating a multilingual website that sells products, this is very important as there are a few aspects you’ll want to consider.

Firstly, are all the products that you’re selling on your store available in all the countries you’re trying to sell in? If not, you’ll need to find a way to make certain products only available in a certain language, but of course, this solely depends on what framework and store platform you’re using.

Tom Dewis, SEO-expert at Ox Essays shares, 

What you have to consider is the currency options that are available to your customers. The cost and price tag of each product will need to be converted automatically in regard to the language that is selected, or using a clearly placed drop-down menu where users can choose their preferred currency.

Finally, you’ll want to consider your posting and delivery options. For example, if you’re not going to be able to sell products in France, you need to make this clear in your terms and conditions.


Consider the Details

This is one point that will solely depend on the content of your website and blog, but it’s definitely worth bearing in mind throughout the entire building process. Many cultures will have a different outlook on certain subjects in life, for example, sense of humor, sexuality, gender equality and symbolism.

When translating your content, be sure that you won’t offend anybody’s beliefs with the content you’re posting to avoid it becoming a problem in the future.

What’s more, if you’re using Captchas on your website, have you investing time in making sure the Captchas are in each language rather than just in English? The same if you’re adding citations to your website for this process, be sure to use tools like Cite It In to make sure they’re correct.

Finalising Your Content

Now that your website is nearing completion regarding the multilingual side of things, you’ll need to invest time in finalising your content to ensure that it’s perfect for release. The first thing you’ll want to do is to make sure that all your content has been translated properly.

One simple way to do this is using a tool for Easy Word Count. Using this tool, you can copy and paste in your original content and then your translated content and then refer to the word count. If the word counts are roughly the same, give or take a few words, you’ll know that nothing has been missed during the translation process.

Secondly, you’re going to want to check your translated content to make sure that it doesn’t breach any plagiarism requirements. While your original content may not be plagiarised, your translated copy might be. However, this is easy to check using plagiarism checking services like Academized or Plagium.

Conclusion

In reality, there is a tonne of features and aspects of your website you’ll need to consider when designing and building a multilingual website, but this will solely depend on the kind of website you’re building, its purpose and the industry that you’re operating in.

However, this article has covered the majority of the basics that you’ll need to consider and should give you the best shot at creating a successful multilingual website.


About The Author

Brenda Berg is a professional with over 15 years of experience in business management, marketing and entrepreneurship. Consultant and tutor for college students and entrepreneurs. She believes that constant learning is the only way to success. You can visit her personal blog at Letsgoandlearn.com



Monday, November 27, 2017

Free Website Templates

Free Website Templates
Sample of the free website templates available

If you are looking for free website templates then you have come to the right place. We have scoured the internet looking for the best totally free, website templates, including fully HTML5 templates, responsive template, animated templates, parallax scrolling templates, templates with bootstrap and much more. So whether it is a simple one column website template you need or a fully responsive business template with eCommerce capabilities you can find it here. Of course all there website templates will require knowledge of HTML and CSS so if you need to brush up on that first then click on the links to learn more.

We have also ranked the providers by stars to give you an idea of both how good we rate the quality of their templates, the ease of use of the website, range of website templates available, design and visual appeal of templates, live demo of templates etc.


Free CSS

Rating :

Free CSS has 2642 free website templates coded using HTML & CSS in its gallery. The HTML website templates that are showcased on freecss.com are some of the best that can be found in and around the net. The website itself is very basic though and as there is no search function to allow you to filter through the website templates so you have to sift through them all one at a time to find out their features, this is a major drawback.
Visit Website


OS Templates

Rating :

OS Templates offer some of the best website templates that can be found on the net. They  update their website regularly with premium and free HTML templates as well as PSD templates.
Whether you are a private person, a freelancer or a company, you are free to use their free website templates for both your commercial and personal websites. There is no search function to help you filter through the templates, which is a pity although the template previews are a decent size and are labelled by features such as HTML5 and responsive. At time of reviewing there are 270 free web templates available.
Visit Website


Styleshout

Rating :

There are currently a very limited (22) amount of free templates available here but they are all high in quality and definitely worth a visit. Beautiful handcrafted HTML5 and CSS3 website templates  with good attention to the details making them premium quality but free of charge. All designs are free of charge and available for personal and commercial projects, in exchange for accreditation. 
They also say their templates are updated on a regular basis. Again, no site search but templates can be categorized by label to help you find the right one for your needs.
Visit Website


Webflow

Rating :

"Webflow gives designers all the power of HTML, CSS, and JavaScript. But instead of writing code, you manipulate the real, working website, visually,  just like your favorite design tool." That is the blurb from the webflow website, the reality is that it is yet another Drag-and-Drop site builder similar to wix, weebly, squarespace and many others. I have included it here,as opposed to the others, as it is newer and people may not have heard of it. Like most site builders you start off on a free plan with limited functionality and can upgrade from there for a fee. Like all the others it is still a good option if you can't code, don't mind forced ads/branding and need limited website functionality.


Medium

Rating :

This is actually on article with a limited (37) number of free website templates as opposed to a dedicated template website but I have included it here as it includes some excellent premium quality templates for free. No search capability but as there are limited templates it's easy to scroll through and find one that's right for you with features like flat design, responsive layout, jQuery sliders etc.
Visit Website


Free Website Templates

Rating :

There are around 350 free templates here at time of reviewing as well as many other premium (paid) templates. These free templates really are no strings attached - you can download each template for free, modify it and create your own website with it. If you're a web design company, you can even use it for your clients as long as you don't charge them anything for the templates. You're allowed to use the templates without linking back. The website does have a search function to help you filter through although it is basic. The templates previews are large though which helps you quickly sift through them.
Visit Website


HTML5Up

Rating :

Again, there are currently a limited (45) amount of free templates available here but they are also all high in quality and definitely worth a look. They are all hand coded HTML5 and CSS3, fully responsive website templates making them premium quality but free of charge. All templates are available for personal and commercial projects, in exchange for accreditation. Again, no site search or even labeling but with so few it hardly matters. There are live demo previews though which allows you to fully explore the templates without needing to download and test.
Visit Website


Templated

Rating :

I like templated. They keep things simple. A quality collection of 866 simple CSS, HTML5 & Responsive site templates released for free under the Creative Commons license. The templates are all top notch and feature live demo preview. If only they had a categorization system or site search to more easily find the right template, the only flaw in an excellent website.Visit Website


Theme Wagon

Rating :

There are a limited number (175 at time of reviewing) free templates at theme wagon but they are all of a very good quality with premium features such as quality design, parallax scrolling and responsive layouts in many of the free templates. There is a site search function but it also includes the premium templates in results so be careful you don't fall in love with a template before realising you'll have to pay for it!
Visit Website


W3 Layouts

Rating :

This is probably my favourite place to get free website templates. There is a huge selection (2881) at time of reviewing and yet it is easy to find what you want as all templates are categorized as well as labelled for search so you can easily find a template that is right for your website as well as previewing each template in demo mode. In terms of usage,  you are not allowed to remove back-link to w3layouts in template unless you have donated for template, this is probably the only downside. But you can use the resources for personal and commercial projects.
Visit Website


*This article was created by our friends at free design resources who will be launching their new website on January 1st. We will be writing more about that at the time but if you want to be the first in the know be sure to subscribe to our newsletter.


Wednesday, November 22, 2017

How To Speed Up Your Website

How to make your website load faster
Although it is unlikely you will make it to a perfect score the tips below can help you get in the green for page speed

As far back as 2010 Google admitted it uses a web pages loading speed as part of it's ranking algorithm and as the mobile web has grown so has the importance of a website's loading speed. So with that said let's get to the point. Here are my top tips to speed up your web pages...



Go Direct...

No landing page redirects please. Why? Well redirects trigger an additional HTTP request-response cycle and delay page rendering. In the best case, each redirect will add a single round-trip (HTTP request-response), and in the worst it may result in multiple additional round-trips to perform the DNS lookup. So you should therefore minimize your use of redirects where possible.

Google identifies these examples of redirect patterns...
  • example.com uses responsive web design, no redirects are needed - fast and optimal!
  • example.com → m.example.com/home - multi round-trip penalty for mobile users.
  • example.com → www.example.com → m.example.com - very slow mobile experience.

Cut The Crap...

Remove any unnecessary content, especially widgets and plugins that you only put into your sidebar or footer to fill it out, yes I'm looking at you! Only present that content that is actually relevant or related to the web page's topic.

WordPress sites especially, tend to have sidebars or footers full of widgets or plugins that are serving no real purpose but yet are slowing down your webpage a lot. "But they are so easy to add and they look really pretty..." I hear you say. That may be true but are they actually serving a purpose? If not, get rid of them.

Tip: If you want/need to link to Twitter, Facebook, Google +, Pinterest etc. just use a linked icon (font awesome icons are great for this) or image as opposed to a widget or plugin.

Prioritise Above The Fold

What we mean by this is that you should limit the size of the data (HTML mark-up, images, CSS, JavaScript) that is needed to render the above-the-fold content of your page. Structure your page so the initial response from your server sends the data necessary to render the critical part of the page immediately and defer the rest. This may mean that you must split your CSS into two parts: an inline part that is responsible for styling the above the fold portion of the content, and the part that can be deferred.

Google suggests the following examples of how a site could be restructured to load faster:
  • If your HTML loads third-party widgets before it loads the main content, change the order to load the main content first.
  • If your site uses a two-column design with a navigation sidebar and an article, but your HTML loads the sidebar before the article, consider loading the article first.

Optimise Images

It really is amazing how much you can reduce image file sizes without any loss of quality. You literally can't see any difference visually but the impact on web page loading speeds can be immense. Here are 2 options for software to help you optimise your websites images.

Minify, Minify, Minify

That heading isn't for dramatic effect as you can, and should, minify your HTML, CSS and JavaScript. This is actually a lot easier than you think. It basically means removing any unnecessary spaces from your HTML, CSS and JavaScript code. There are even lots of websites that will do it for you for free, my personal favourite due to it's beautiful simplicity is this minifier.


Enable Compression

The word compression tells you all you need to know about what this does but how does it work? All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and, most importantly, improve the time to render of your pages. See Google's explanation of text compression with GZIP to learn more.

Good News: If you have a Blogger website then you automatically have gzip compression. If you don't believe me then test your website's compression.

Bad News: Some other hosting providers' basic hosting package do not support compression so be sure to check before you waste your time and effort working on it.


Browser Caching

Caching involves storing information from your website for reuse. Fetching information over the network is both slow and expensive: large responses require many round-trips between the client and server, which delays when they are available and can be processed by the browser, and also incurs data costs for the visitor. Therefore, the ability to cache and reuse previously fetched resources will optimize performance and speed up your website. The most common way to leverage browser caching for increased page loading speed is using a .htaccess file.

Learn how to leverage browser caching.

Tip:  If your website is hosted by Blogger you cannot use browser caching through the .htaccess method as you have no access to the .htaccess file. However you can try this alternative.



How To Improve Website SEO

Search Engine Optimisation for websites
Search Engine Optimisation for websites

The role of  SEO (Search Engine Optimisation) is to optimise a website to make it as visible as possible to internet search engines, in order to increase their rankings, maximise traffic to them and therefore increase their revenue through sales or advertising.

Search engines, especially Google, are very reluctant to reveal how their algorithms work so it is impossible to specify exactly how to optimise a website's search engine performance perfectly, however there are still some tools and techniques which are known to improve a website's visibility to search engines. It is these SEO tools and techniques that are discussed here.


Here are our top 10 ways to quickly and easily improve your website SEO...


1 - Web Page Names:

As well as the obvious choice of the name of the website itself it is also important to consider how you name each individual web page. The name of the web page is the second thing a search engine will read, after the website name itself, so it is an important opportunity to include keywords and describe what content is on the page. When designing a website, page names are usually saved as all one word, for example 'web design' becomes 'webdesign', as it is quicker to type and easier to remember.
TIP: You may consider instead saving it as web-design or web_design as it allows search engines to identify the two separate words, which are both keywords, instead of not recognising the singular word 'webdesign'. Also avoid using abbreviations for page names, for the same reason.
Back To Top

2 - Web Page Titles:

The title of a web page is written in the HTML code in the head section of the webpage and appears in the top of the browser window or in the tab of newer browsers. See a sample code and sample result below.


The title of a web page is extremely important as is showcased by the fact that it is the first and largest thing in the Google search results. See the example below, the title is in blue. This is clear evidence that search engines, such as Google and Bing, give great importance to a webpages' title.


3 - Article Headings and Sub Headings:

Headings, created with the 'h1', 'h2', 'h3', elements are important for highlighting these Keywords. As they are headings and not just body text they are seen as being more important for describing, in short, the content that will follow. Therefore try to integrate relevant headings into the content of your website for better SEO but also for another reason.

In today's fast paced world people don't really read articles or webpages, they skim through them to try to quickly find the content they are looking for. By using headings and sub headings in your webpages you are breaking up any long, boring looking passages of text into smaller, more manageable chunks and helping your visitors with this process and they are therefore more likely to find the content they need and stay on your website longer.

TIP: as well as helping with search engine optimisation they will also help with your website pages bounce rate.
Back To Top

4 - Keywords and Description:

When someone uses a search engine they normally don't type full sentences like 'I am looking for information on design' , they usually just type in 'design' or 'design information', in this case 'design' and 'information' are the keywords. It is important that your website contains the key words relative to it.

This used to be done using meta tags, some search engines still use meta tags, but due to the practice of keyword 'stuffing' (repeating key words over and over) search results were beginning to become unreliable as the best/ most relevant pages were not necessarily making it to the top of the rankings.

Google admits it no longer uses meta tag keywords, although it still does use the meta tag descriptions and the description usually appears as the sentence below the website title (in blue) and address (in green)in the search results. See the example below,



The code for meta tag keywords and descriptions goes in the head section of the HTML code, as it is information about the page but it does not appear on the page itself (otherwise it would go in the body section). To see an example of meta tag code see the example below,



Although meta tags are useful, it is much more important to include the keywords, that you think potential visitors will be searching under in the website content itself. Despite all the tools, techniques and tricks associated with SEO it still all comes down to the quality of content in the website. As they say in the search engine optimisation business "content is king!".

With this SEO mantra in mind, be sure to tweak the body text to include as many keywords or keyword synonyms as possible, without of course, ruining the content itself. The quality of the content must remain high as ,even if you get to number 1 in the search engine rankings, when visitors come and don't find the information they are looking for they will leave the site just as quickly as they arrived and that is bad for your SEO (see bounce rate below).

Back To Top

Links, in two senses, can help a website's ranking in search engine results. Firstly, by linking your website with other websites and getting them to link back to you, you are enhancing your website's online reputation and demonstrating that it is a trustworthy and safe website for visitors. Search engines regard trust and safety highly as they do not wish to lead searchers to an unsafe or virus filled website.

Secondly, the links within your website are another opportunity to include keywords in the content. As links are 'marked up' in a different way to normal body text it is only logical to presume that search engines will read it in a different way to standard body text.

TIP: It is believed that all content "Marked Up" differently to standard body text is read differently by search engines and possibly given greater importance. Therefore, make good use of links and bold, underline and italics text to subtly increase emphasis on your chosen keywords.

The click-able content of the link and the link title (which should be included on every link) should be descriptive enough to let the website visitor find the information they need which in turn keeps the visitor on your website for longer and increases the sites traffic statistics while also reducing the 'bounce rate'.

The 'bounce rate', according to Google Analytics, is 'the percentage of single-page visits (i.e. visits in which the person left your site from the entrance page). Bounce Rate is a measure of visit quality and a high Bounce Rate generally indicates that site entrance (landing) pages aren't relevant to your visitors. By having clear and obvious links, especially in the menu section, visitors are more likely to stay on your website and search for the information they need. So it can be assumed that Google will punish a website with a high bounce rate as it suggests visitors are not finding the content they expected.

Back To Top

6 - Images:

SEO for web images
Optimising your website images and their html code will help with SEO

With the evolution of search engines people can now search directly for images or videos without having to go through the site on which they are hosted. Despite this, search engine haven't evolved to the point where they can directly extract the meaning from a photo or a video. Therefore search engines are still reliant on the information we provide them through names, alt attributes, title attributes, headings and surrounding content.

The simplest thing you can do to increase the meaning of 'img' elements is to use proper file names. For example, let's say we have a web page about web design and I took a photo of someone sitting at their computer that I then wanted to post up on the page. Cameras will auto-generate a file name to my photo, such as DIM1234.jpg, so it is important to rename it to something that specifies the content of the image such as web-designer-at work.jpg. Now the URL of the image will be something like http://example.com/web-designer-at-work.jpg. The image now has a better chance of being indexed for terms such as 'web design' and 'designer at work'. The image may eventually rank in the results for Google Images and drive traffic to your website.

The second aspect involved in optimizing images for SEO is placing important keywords in the image's alt and title attributes. Here's another example,

<img alt= "web designer at work.jpg" title="web designer at work" src="web-designer-at work.jpg">

The alt attribute is typically regarded as the primary attribute of an image that a search engine will use for gaining context. But don't stuff keywords in them, write your alt attributes primarily for your visitors. Search engines view alt attribute keyword 'stuffing' as a bad practice and may remove your image from search results.

Back To Top

7 - Videos:

SEO for videos
Optimising your web videos and their html code will help with SEO

Much like images, videos can't be crawled by their content. However, there are metadata that you can include to help search engines understand what the video is about. The main thing to optimize is the title of the video, especially when you're using a third party streaming service such as YouTube or Vimeo. Secondly, add keyword tags to videos when uploading them to YouTube and Vimeo which they use in their site search. Another element that affects the search results of a video is the video's description. The description is an opportunity to include the keywords that you wish the video to be found under, without 'stuffing' of course. A good description will go a long way to increasing the videos ranking in search engine results.

Another way to increase ranking in the search results for videos is to get as many views, Facebook Likes and +1's on your video as possible. This is based on the logical assumption that search engine algorithms take social sites into account as a ranking factor. If your video gets a substantial amount of Facebook Likes compared to other videos in the same category, there is a higher chance it will rank better for your targeted keywords.

So search engine optimisation for images and videos takes little time to implement and can provide significant results, especially in niche markets. For example, when you're having trouble getting a page or article to rank for a competitive keyword in your niche, posting an optimized video or image may help you get a leg up. As already mentioned, search engines can't index the actual content of an image or a video, but we can provide them with greater meaning and context using the simple and practical techniques we have discussed.

Back To Top

8 - Page Load Speed:

page load speed for seo
Page load speed is now a recognised factor in SEO

The page loading speed of your website is now known to have an effect on how Google ranks it in it's listings. A faster loading website is immediately more user friendly and with studies showing users will click out of a website if a webpage is not at least partially loaded after 3 seconds then having a website optimised for speed is a must.

Google provides an excellent resource to test the speed of your webpages, in desktop and mobile terms, and then outlines possible improvements with links to articles on how to go about it. This very useful resource is referred to as the Google Page Speed Insights and can be found here.
TIP: Images, videos, ads and any widgets will always be the main culprits for slowing down a webpage but don't rush to delete valuable content, just optimise what is needed and remove anything unnecessary.
  Click here for more tips to improve your website loading speed.


Back To Top

9 - Mobile Friendliness:

mobile seo
Mobile friendliness is now a factor in SEO

A noticeable feature on the Google page speed insights results which also appears on Google AdSense and Analytics account pages is a reference to mobile friendliness. It may appear under different names such as user experience or site responsiveness or mobile compatability but the point remains the same; Google values how mobile friendly a website is. In each of these cases you will get a rating or score for your website and a link or links to articles'tutorials on how to improve it. Why is this relative for SEO you ask; because if Google are going to the effort of encouraging you to improve it and assisting you in doing so then you can be sure they are factoring it into their search algorithm.

As with the page speed, you should not go deleting valuable content or spoiling your websites design just to achieve a better score but a few small tweaks or removal of secondary content when an article is being viewed on a mobile device should be considered. Page load speed is a major factor in mobile friendliness but don't forget font sizes, spaced links (tap targets) and a clean simple layout.

Back To Top

10 - Create a Google Account:

A Google account allows SEO Specialists to utilise their online tools, such as Google Webmaster (Search Console), analytics or web optimiser tools. As well as these extensive tools, the simple but vital act of submitting a website to be included in the Google rankings can only be done if you have a Google account.

Having these tools at your disposal is one thing but it is vital that you utilise them effectively and use them often. SEO techniques change frequently, so a large part of the SEO Specialist's job involves research, self-study and reading in order to stay up to date with developments in the industry. Thereafter you will be responsible for analysing the website statistics that these tools provide in order to monitor the effectiveness of the website and make adjustments as necessary.

Back To Top

*If you found this article useful you may also enjoy our Image SEO, Create A Website or Web Development Resources articles.


Friday, January 6, 2017

Smooth Scrolling For Web Anchor Links

Click on the demo link below to test the smooth scrolling effect

I recently added a smooth scrolling effect to this website (test here if you want a demo). It is set to trend in 2017 after all.

During my research in preparation to best implement this effect I was surprised at the variety of code options on offer and even more surprised by the fact most of them didn't work! So with that rant over, I'm writing this short post to save you the time that other websites wasted on me.

Below is the full and exact code you need to add into the 'head' section of your website in order to achieve a smooth scrolling effect for all 'anchor' links on your website.

If you want to learn more about how it works or for any troubleshooting you can read more below.

The Code...



How it Works...

jQuery

Most of the scrolling magic happens offsite which is why the link to the jQuery library is necessary.
Some websites will say you should downloadand host the jQuery library yourself rather than use a CDN (Content Delivery Network) link but many users may already have downloaded jQuery from Google or Microsoft when visiting another site.

As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.

jQuery is a fast, small, and feature-rich JavaScript library, and the smooth scrolling effect is just one of many effects in the library. This jQuery link must come before the other code as it needs to load before the scrolling effect will work.


The script which follows the jQuery library link then does the following...

  • waits for the page to load
  • adds the smooth scrolling effect to all links on the page (to be activated onclick)
  • checks to see if variable 'hash' has a value
  • if 'hash' has a value, it disables the default anchor link behaviour (usually jump to the link)
  • stores the variable
  • activates the scrolling effect on the link
  • gives you option to set scrolling time in milliseconds
  • finally it adds # to the end of the url

Troubleshooting...

  • Check that you have copied all the code (Sometimes it's the most obvious thing that we get wrong!)
  • Make sure all the code is in the 'head' section of your webpage, between <head> and </head>
  • The code needs to be pasted into the head section of every webpage that you want the effect to work on. Unless using a CMS like Blogger or Wordpress, in that case just paste into the site template
  • Ensure the jQuery library link is before the rest of the code.
  • Check that your browser or antivirus is not blocking javascript from running.
  • jQuery uses $ as a shortcut for jQuery. Thus, if you are using another JavaScript library that uses the $ variable, you can run into conflicts with jQuery. In order to avoid these conflicts, you need to put jQuery in no-conflict mode immediately after it is loaded onto the page.


close
Banner iklan disini