The final user testing

User testing has been done throughout the full design and development process therefore all feedback received has been already implemented into the website.

The final user testing

The final user testing has been done and the feedback was positive.

  • good use of colours/images
  • simple and straightforward registration form – visual images to choose from no typing which saves time and it is trendy
  • good explaining of hover effects

SEO – HTTP/HTTPS

More and more websites these days have HTTPS:// instead of usual HTTP:// in their URL links.

Research has been done to find out what it means and what functionality it has.

HTTPS is ‘Hyper Text Transfer Protocol Secure’ which basically means that it is safer version of HTTP. This means that information that are sent between browser and the Web are encrypted and more secure. This protocol is used for online banking transactions or shopping in which data of users need to be highly secure to avoid lost of finances. HTTP is used mostly with static websites using only HTML as users cannot input any information in.

gfd

All information sent over regular HTTP is just plain text and are not encrypted therefore hackers can easily hack the website. Because all information sent over HTTPS are encrypted, hackers would not be able to encrypt sent data even if they managed to brake into the connection. Having HTTPS also speeds up the website loading time and increases SEO. Google confirmed that HTTPS website will have slightly higher ranking in search engines as they are more secure.

The major benefits of a HTTPS certificate are:

  • Customer information, like credit card numbers, is encrypted and cannot be intercepted
  • Visitors can verify you are a registered business and that you own the domain
  • Customers are more likely to trust and complete purchases from sites that use HTTPS

How to set up HTTPS on website:

  1. Host with a dedicated IP address
  2. Buy a certificate
  3. Activate the certificate
  4. Install the certificate
  5. Update your site to use HTTPS

Summary

This would be needed for social community website as there would be a lot of sensitive data such as contact details and information about users, personal photos etc. HTTPS would be needed to avoid hacking and leak of data of users.

Source: https://www.instantssl.com/ssl-certificate-products/https.html

http://www.howto-expert.com/how-to-get-https-setting-up-ssl-on-your-website/

SEO – XML sitemap

XML site maps are there for Google to easier orientate in pages of your website. This helps with SEO.
There is sitemap generator called XML-sitemap generator that automatically generates sitemap.

This is the main page of this sitemap generator. Simply add full URL of the website and click ‘Start’.

405

Sitemap is ready to be used –

406

Follow the instructions that are provided.

Download the site map and put the file in root folder. In Webmaster account open ‘Sitemaps option’ and press on ‘Add sitemap’. Then type name of the file and submit sitemap.

tracking code

That is all.

At the moment there is an error message. All recommended adjustments were made however error message is still there. Luckily, the sitemap is still pending in process window therefore decision to wait 24 hours has been made to see if the sitemap works. This is because both Webmaster tool and Google Analytics accounts have just been created.

SEO – Google Webmaster Tools

Google webmaster tools is a tool that helps to find out if the website is easy to find in Google search, check errors in the website for easier fix to make the website appears in Google search results in high place.

Google account is needed in order to access this tool.

Webmaster tools helps to check if users link to pages of the website and how often the website appears in Google search results. This way it is possible to find out what pages of website are mostly visited by users and focus on most visited ones. Good feature of Webmaster tools is that if there is any issue with website, it will automatically send an e-mail to make the admin aware of existing problems.

Untitled

Click here to visit the site.

Setting up an account

As mentioned above, Google account is needed to sign in. After logging in, add website that requires to be tracked and it will ask for verification. Simple press on ‘Verify now’.

2

Another page will provide all information needed to verification of the website. Recommended method is safer way to go. Follow instructions and click ‘Verify’

404

After clicking ‘Verify’, successful verification of ownership.

4

This is working screen –

5

At the moment, dashboard is empty as it just been created. The admin automatically received e-mail providing more information on what to do next –

6

The next step is to add site map for easier orientation of Google in the website witch helps with SEO.

SEO – Google Analytics

Google Analytics is a tool that monitors users’ activity is on the website which helps with improvement of SEO. It also provides information such as where users come from, what devices they use to browse the website (this is important for possible future improvements), how much time they spend on the website etc.

To use this tool, Google account is needed however in this case, Google Analytics has already been used in past therefore registration is not needed anymore. The next step to start to monitor users’ activity on the website is to add the website to the existing account. Go to Admin>Account>Add New Account –
397

After clicking on ‘Create new account’, add all information about the website and click ‘Get tracking ID’ –
398

After that, the account is set up and the next step is to copy tracking code that is generated by Google Analytics and paste it into the file. There are two options how to embed the tracking code –

  1. JavaScript – paste the code in every page that requires being tracked, paste the code before </head> tag
  2. PHP –
    • Use the code above to create a file named “analyticstracking.php”, and include the file on each PHP template page.
    • Add the following line to each template page immediately after the opening <body> tag:

In this case, PHP implementation is going to be done.

 

After clicking on ‘All website data’, all information should display however, because the account just has been set up, there are no information yet. It can take up to 24 hours to receive any information. And even after that, information depends on how much users visit your website.

tracking code

Example of received data from different website

To show example of what received data from Google Analytics look like, decision to use data from different website has been made. There are many different categories but for this example are only going to be used: overview of data, demographic and interest report, browser and OS.

Overview of data –
399

Demographic and interests report –
400 401 402

Browser & OS

403

SEO – accessibility test

Accessibility is important part of designing process. This is because every website must be accessible for people with different disabilities i.e. colour blindness

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability.
Source: https://www.w3.org/standards/webdesign/accessibility

There are rules of accessibility that should be kept in mid while designing any website and they can be find on W3C.

This is colour blindness check that was done to make sure that colour blind people would have no problem using this design.
Tool that was used is called Colour Blindness Simulator and this is the link to it – http://www.etre.com/tools/colourblindsimulator/

Process is easy; upload image, select the condition to simulate – there are three

Untitled

and press ‘Simulate Colour Blindness.

The result of splashpage

This is the result for Protanopia –
protanopia

This is the result for deuteranopia –
deuteranopia
This is the result for tritanopia –
tritanopia

 

The result of dashboard

This is the result for Protanopia –
protanopia

This is the result for deuteranopia –
deuteranopia

This is the result for tritanopia –
tritanopia

Reflection

People with these three forms of colour blindness would be able to use this design as dynamic of colour scheme was choose well.

SEO – JavaScript, HTML and CSS Minifier

Minifying HTML, CSS and JavaScript helps to improve loading time of the website.

This is done by minifier online program – https://javascript-minifier.com/

Simply paste JavaScript code and click ‘Minify’ –
394

In other window there is minified version of pasted JavaScript which is available to download as File or just simply copy the code and save it in new file i.e. mini.app.js

This is the same process for HTML and CSS –
http://cssminifier.com/

https://kangax.github.io/html-minifier/

SEO – PageSpeed Insights test

As part of SEO, PageSpeed Insights test will have to be done in order to find out loading time of the website on mobile and desktop. User experience is also provided.
Here is the link for PageSpeed Insights test – https://developers.google.com/speed/pagespeed/insights/

This is what the result would look like if this project wasn’t concept only.

This is the result for mobile –

389390

This is the result for desktop –391

SEO

What is SEO?

SEO (Search Engine Optimization) is technique that is used to effectively display website in search engines.

There are a few simple rules to make website SEO friendly –

  • focus on content of website – make content of website relevant to title of website
  • valid HTML – use www.validator.w3.org to validate website to make sure that there are no mistakes (for more information, read this article)
  • good keyword phrases
  • no need to optimize full website – focus on a few good key phrases for your website and stick to them, however !!!!AVOID!!!! being repetitive!
  • link to social media – links to social media give website high SEO score
  • links to reliable website -for example blogs

Google SEO tools

There are loads of different tools for SEO on internet, but Google SEO tools are 100% reliable.

  • Google Analytics
  • Google Webmaster Tools
  • Google Alerts
  • PageSpeed Insights
  • Google adwords keyword planner
  • and many others