websites analysis

In this post, I am going to analyse two e-commerce websites.

First H&M:

This is what the website looks like once it is opened:

The website homepage


 By clicking right click and selecting view page source, this page will appear(This page contains the HTML codes used to create this website):

The start of the code <HTML>

From the code, we could observe that this website has three main sectors, header, body, and footer:

1- header:

As shown in the photos, the first one illustrates that the header section has started. 
Within the header, there are :
  • hyperlinks that take the user to other pages 
  • Sign in functionality 
  • Interactive Image button with a link to the shopping bag, favourites, customer service, store location.

The header contains meta tags as well; it was discussed in the SEO and Task 3 post.

The beginning of the header 



An example of the viewport meta tag 







The banner:


The banner on H&M



As shown, the banner contains image and text :





3- body :
The main body on the website





And here, we can see where the header has ended(<head/>, and the body has started (<Body>). We can notice that the beginning and the ending part's difference is that the starting tag does not include a forward slash (/).

The ending of the header and the start of the body 




In the body, javascript is used along with HTML.
  • Links to the products are provided.
  • Cookie notification 
  • Selling banner 
  • Text that is connected to links that take you to the product or service page 

I noticed that the footer is included within the Body part, as shown below:


The footer is within the body part.


3- The footer includes:
  • Links that take you to the website's social media account 
  • Help categories links 
  • and some other information 

  The categories on the footer 


 


And finally, the end of the code and the close tags as mentioned earlier with a slash (<HTML />).


Some of the features of the H&M web site:
1-The menu makes finding the wanted products much quicker.
2-The home page has text connected to hyperlinks of all the information that the consumer might need.
3-The footer has helping information and social media account.
4-The checkout process is simple to follow.
5-The wishing list makes it easier to save the item you want for later.
6-The navigation between the product is straightforward. 

Sources:

H&M website link: https://www.hm.com

________________________________________

Second Tesco:


The website homepage


The header 




1- Header :

As shown, Javascript is used along with HTML.

It includes:

Meta tags and hyperlinks. One of the meta tags used was the title Meta tag, which in this case was "Tesco - Supermarkets | Online Groceries, Clubcard & Recipes." In regards to the hyperlinks, both text and image hyperlinks were used. I explained "Meta tags" and "Hyperlinks" in my previous posts Task3 and SEO.

Title Meta tag




The header source code


 


The body












The body source code 


2-The body:

As shown, javascript is used in the body as well. The body includes:

  • The cookie information.
  • Links that are connected to the products listed on the main body of the website.
  • The navigation menu.

As H&M, the footer code in Tesco is also within the body of the website.




The Footer 







The Footer source code





3-The Footer:

The photo illustrates the element included on the footer:

  • Social media information.
  • Footer wrapper.
  • Help information.
  • The policies.

 Some of the features of the Tesco web site:

1- The searching bar's availability on the web site makes it easy to find the item wanted.
2- The home page shows a lot of useful information.
  • A location icon where can take you to a page where you can find the store locations.
  • Sign in functionality 
  • Useful links on the footer
  • Menu with different categories makes navigation more convenient. 


Sources:

Tesco website link: https://www.tesco.com/

_______________________________

In the end, there were some similarities in the source code on both websites, such as the use of the meta tags and how both websites included the footer within the body.

Some other important element to mention:
  • That the tags start with these symbols (<>), and when closing the tag, a forward slash should be included (</>).
  • Meta tags are only used in the header, and they normally define the title, description, and viewport.
  • Hyperlinks are an important element to make the navigation more convenient to the visitor. 


Sources:









Comments

Post a Comment

Popular posts from this blog

Order form

Image
 I created a product list using excel. The product list requires a number of formulas which will be explained in this post. First, The Lists: 1- on the product sheet, we have created two lists, one for the product name called  (ProductList)  and the other one for all the price and the name called  (ProductLookup). 2- On the consumer sheet, we created two lists as well, one for the consumer name called (consumerList) and the other one for the consumer name, address, postcode, and the city called (consumerLookup). After that, the lists created were used to give the option to choose the product, as shown below: The product list The same thing was done to the consumer list; it was used to allow us to chose the consumer name, as shown below: The consumer list second, The formulas used to complete the product list: 1- I used a formula to show the price associated with the product chosen; thus, if there was a product, it would show its price; otherwise, it will show nothing. The formula is wr
Read more