Website Review Editing and Proof Reading Services

This is a solution of website review assignment help in which we discuss types of website review or website provide various information of a company.

Review of the website in different types of screen

We check the several pages of the website such as; home, services and sign up in different types of device screen in landscape and portrait both the types of view. The screenshot of all the pages in all types of screen given belo

Standard mobile resolution (320*480)

Home page

Services page

Sign up page

Standard mobile resolution (480*320)

Home page

Services page

Sign in page

Many Samsung, HTC, LG mobile resolution (320*533)

Home page

Services page

Sign in page

iPhone5 resolution (320*568)

Home page

Services page

Sign up page

Nexus mobile resolution (360*640)

Home page

Services page

Sign up page

iPhone6 resolution (375*667):

Home page

Services page

Sign up page

(1). Provide the overview of nominated website.

The nominated website ‘BUNNINGS warehouse’ is an ecommerce website of the company Bunnings. The company offers the various in-home and in-store services for the users. It serves their services in Australia and New Zealand.The company sells its products and services online and offline both. The website Bunnings warehouse shows all the services and products with their charges and price. Users have to login on the website and select the products and add the product to wish list and purchase it. The website also provide the various information of the company such as, contact information, services, resources, range of their different products, and sites information.

The website mainly provide two types of services, these are:

In-home service: In-home services website is providing the following services:
Kitchen design: Bunnings warehouse provide the services for designing the kitchen according to the customers life style and family. A special kitchen designer team which helps to design your kitchen according to the customer needs and budget. They also supply the various products for your new kitchen like bench tops, cupboards, sinks, splash backs, sinks, tap ware,accessories, and many others.
Custom bench tops: The Company offers the making and installing the bench tops services according to the customer needs and budget.
Custom splash backs: Bunnings warehouse offers the splash backs services for the customers according to their needs and budget. They provide the polymer, acrylic, and glass splash backs.
Carpet installation: Bunnings warehouse also provides the easy carpet installation services for the customer. Customer simply have to choose the carpet of any size and place the order, the carpet installation team will go to the customers home and install the carpet.
Custom blinds: Bunnings warehouse offers the customs blinds for the customers home in a large range of the styles, materials, configuration and color. They offers both the indoor blind and outdoor blind.
Color consultant: The Company is offer the color consultant for your home and offices. The colorconsultants are mainly provided by the famous paint brand company Dulux and Taubmans.
Air conditioning installation: The Company offers the split air conditioning installation service by the license installer for the customers if they purchase it from the Bunnings.
Hot water installation: Bunnings offers the fast hot water installation service to the customers. They have to purchase any hot water system like electric, gas or solar. The installation team installs it at their home according to their preferred time.
Door installation: The Company offers the door installation service for the customers if they purchase any new doors, furniture, and accessories from the Bunnings.
Garage door installation: Bunnings also provide the any types of garage doors installation services such as, residential or commercial roller doors, automatic openers and sectional overhead doors.
In-store services: In-store services website is providing the several services for its user, these are given below:
Special orders: The Company offers the special order facilities for their customers. They deliver the products at customer homes free of cost.
Hire shop: The Company offers the wide variety of tools and equipment for their customers.
Get it home: The Company Bunnings warehouse provides the services for the customers to get their products safely and securely at their home.Company offers free courtesy trailers up to two hours and in case, if the customer need more time,they can offer the trailers or van for more time. Customers have to hire the trailer or van according to their need.
Spare parts enquiry: The Company provides the services for repairing and replacing the spare parts of power tools and outdoor settings. The customers have to call the number given on the website or send their enquiry by the form given on the website.
Color matching: The Companyprovides the color matching services for the tile and fabric. They use the color computer to match the color recommended by the customers.
Key cutting: The BunningsWarehouse Company is providing the key cut copies services for the home and car keys.
Pool water testing: The company provides the services for examine the water health of the customer’s pool.
D.I.Y workshop: The Bunning Warehouse Company provides the D.I.Y workshop services for the kids, adult, and women.
Kids’ activities: The Bunnings warehouse company provides also the kids services. It is provide the fun kids’ activities and inspiration to keep them entertained at their home.
Café: The Bunnings warehouse company also provides the café services like coffee, tea, and foods.
Gas swap: In this service, company drop of the empty gas cylinder from the customers home and pick up the full replacement bottle of the gas cylinder at the customers home. If the customers don’t have any gas cylinder, they can also purchase the new gas cylinder from the Bunnings warehouse.

The website contains the various working video of all the services provided by the company and contains a gallery which includes the various images of the company warehouse, store, and different section of the company.It also provides the information of the financial result and business analysis of the company.

2). Elaborate the main features of the website.

The main feature of the website is that it is responsible for all the type of screen at any resolution. We test the website with the help of Chrome device simulator.We check the each page of the website on the different screen size given in the chrome device simulator. Except this the nominated website has also several features which are elaborated below:

Search option: The website includes the search option features which make the users comfortable to find the desire product on the website. They can easily get the product which they need by typing the keyword or name in the search bar given there in the website.
Sign up/sign in form: The website includes the sign up and sign in form features and the links for sign up and sign in are clearly given on the top of the website, so the users don’t have to search and spending so much time to get the sign in and sign up link on the website.
Contact information: The website consist all the necessary information of the company and merchant so that in case, if the user need any support, they can contact with the company.
Web browser compatibility: The nominated website is compatibility for all the web browsers. There is various web browser available and used by the users so that it is necessary to all the website should be web-browser compatible. This website supports all the web browser such as, Internet explorer, Google chrome, Mozilla Firefox, etc. so the user feel comfortable to use this website.

(3).What is the positive and negative aspects of the website? Also provide the interaction and usability aspects of the website interface.

Positive aspects

The website has various positive aspects. It is an ecommerce website and provides lots of services and product which is needed in daily life of all the people. Its provide various in-store and in-home services for the users, so that the user can shop online and get their product at home or get the licensed and specialist team for their work at home according to their comfort time. User can also get the many in-store services with the help of the website. Website provides the store information and contacts, users have to call for their enquiry or send their query by the query form given in the website.

The website also provides the many kids, adult, and women services at the user’s home or their desire place so that they can entertain in their free time. The website is fully convenient for the users. They don’t have to leave their homes and spending the time in queue in shopping malls and mart to get the best deal and product.

Negative aspects

The website has some negative aspects on the users, such as:

Privacy: The users have to submit their personal information for shopping and get services through the website. All the transaction which is made online by the user is recorded in the website database.
Security: The information which is stored in website may be hacked or steal by the others if the website is not well secure and the customer may be harmed by the identity theft and credit card theft.
Returns and complaints: The users have to pay the return rate in case, if they want to return their purchased product by any reason like not satisfied to product or any other.

Interaction aspects of user interface

There are various things in the nominated website which helps to grab user interaction on the website, such as:

Eye catching design: The design of the website is eye catching for the users; it’s not dull and too flashy. The eye catching design of the website make the users comfortable and stay online to use the website for more action, it’s not irritate the users.
Proper content: The content of the website contains all the useful information which makes the user interested in using this website. It also includes the helpful information for operating the website, so all the user is comfortable and can easily operate this website.
Convenient navigation: The navigation of the website is convenient and clearly understandable for the users, when they using the website. All the links are placed at right place in the website, so the users don’t get confuse and irritating, where they have to click.
Images and video: All the images used in this website are in proper format and standard resolution, which attract the users. The images are not pixilated, so the users or visitors of the website can view the clear image in different types of devices and download the images easily. The videos used in the website are also in standard resolution so that it can easily upload on the web browser and users/visitors don’t have to wait for a long time.

Usability aspects of user interface

The usability of the nominated website is good and it’s providing the easy access of the website for the user. Some of the usability aspects of this website are given below:

Learnability of website: The learnability of the website is very easy for the users, so that they can accomplish the basic task easily even they visited first time on the website.
Efficiency of the website: The website is very efficient in use, so that user can learn the design of the website easily and quickly and perform their task easily on the website.
Memorability of the website: The design of the nominated website is very easy and clearly. Each and every content of the website is placed at right place, so that the user can easily memorize the things of the website and can perform their task easily even they uses the website after a long time period.

4) Review the nominated website with the two other persons

We have invited the two other persons to critically review the nominated website by using the chrome device simulator. The persons are my friends and another is my older brother. My friend is 26 years old and he is pursuing MBA. My brother is 30 years old and he is an accountant.

Now we ask to both for review the website by using the chrome device simulator.

Review of friend

To start the review about this website, first I emulate the website across the different sizes and resolutions given on the chrome device simulator. I get the website is responsive in all the screen sizes and resolution. The website layout also fit in the both the type of screen in landscape and portrait view. At the breakpoints of the website, I noticed that when the pages hit the 768 pixel breakpoint, it stops rendering correctly.

Review of brother

I started the website review by emulating the website in chrome device simulator by checking the website pages across the different screen size and screen resolution given in the chrome device simulator.

I found that all the pages of the website best fitted according to the different screen resolution and screen size. I also check the different pages of the website in portrait view and landscape view of the device, I found it is rotating well and displaying the content well in the both view. When I check the network configuration of the website in all the screen size, I got the network condition is very according to the screen sizes in device and browser. I also notice that the pixel density is changes according to the resolution of the screen and the real page loading time differ in different screen resolution.

I notice that the videos given in the website is not adjusting according to the screen sizes in different screen resolution. The resolution of video is not responsive for all the types of screen.

5) Assertions relating to RWD design principles

The website needs further improvements especially in its designing part. Although the website is very informative for the users but according to me, it is not interactive and attractive for the users who are visiting the website. The content used in the website is confined, simple, understandable and logical but this content is not arranged properly or we can say the content is not written in an attractive manner. A lot of work needs to be done on the designing part of the website. Firstly the header in the website is too long instead it should be short with lots of information into it. The content, menus or links in the header should be arranged in a proper manner so that it looks good to the user and user visits our website frequently.

The space which is left blank on the sides of the header must be used. The logo of the company should be shifted to the left side and the search option should be reduced in height and shifted towards the right corner. The address and contact number mentioned is not on the appropriate location. It is getting mashed up with the other information on the header. The height of each sub menu should be reduced and menus should be arranged properly. The slider should be shifted a little upwards. In the leading brands section, spaces are required between the logos used. The logos are getting mixed up with each other and are looking untidy. The font style should be similar in the website. Instead of putting the products in various rows, slider can be used to show products. The footer of the website needs improvement.

The footer of the website should be reduced in height as the lot of extra space is included at the bottom of the footer which is not looking good. Also the menu and submenu in the footer are not arranged systematically and is looking untidy. Various more implementation on this website needs to be done. The website is not up to the mark. The developer has worked a lot on this website and used a very good and informative content also the pictures used are interactive. But he lacks in the designing part. The developer needs to put his hard efforts in the designing of the website so that the website could match the top and best websites.

6)Provide recommendations on how the website should be improved

From last few years, various changes had evolved and are still evolving in responsive web design. In past years, the website was opened only on the laptops and computers. The websites which were developed contained the resolutions according to the laptops and computers only as the websites were not opened on any other devices. So the coding was done by keeping in mind the size of the screen of PCs. With the updates in technologies, we have got various devices and several new features in those devices. Now the same websites can be opened on various devices like mobiles, tablets, Mac book, Laptops, PCs, etc. The size of the screen of each device differs a lot. For this we need responsive web designs.

For more information read Programming Assignment Help

Q. What is a responsive web design?

As I have already mentioned a lot about responsive web design in the introduction part, responsive web design is very useful for the developers as a single code can work or implement on multiple devices. With the help of responsive web design, developers now need to write a single code for the website, and the website will change its resolutions or size according to the size or resolution of the screen on the device in which the website is opened. Even if you change the size of your browser in the same device, the website will adjust according to the changes made.

The main principles for the responsive web design are:

Fluid images
Fluid grids
Media queries

Let us learn the principles of responsive web design in brief.

Fluid images:

The idea behind this is that the image will adjust itself according to the limitations or the size of the fluid. To implement this, we simply need to write a CSS code in a single line.

Code: img { max-width: 100%; }

This will instruct the browser that the image will remain large as its pixel value and takes care that the image on the webpage is not pixelated. If the image is opened in the window smaller than the image's size then the image will automatically shrink.

Fluid Grids:

Using the system of pixels was started in the print industry, where the size of newspaper and magazines were same but in the website, all the devices on which the website is opened have different size of screens. Hence here using fixed unit - pixel is not beneficial as we do not want the resolution of the website to be fixed, it should be variable according to the device. For this now we use percentage as a relative unit for website.

If you know the designing in pixels and faces problem in using percentage then you can easily do it by using this formula:

target / context = result

Example: You have a website having width = 960px. Now you want the website to get adjusted in the maximized browser having width = 1920px. Then according to the formulae, percentage value is :

960 / 1960 = 50%

Media Queries:

If you have developed the website according to the resolution of the laptop and you want that she should adjust it according to the mobile resolution then it is difficult. As mobile phones contains the portrait that is their screen is larger vertically than horizontally. Here we need the media queries. From several years from now, the CSS technology has been available for developers in the browser which contains the media queries. Media queries have a functionality to check first and then let the CSS to apply. They first check the conditions or resolutions of the browser then apply the CSS on the website. Media query looks like this:

@media screen and (min-width: 600px)

Mobile first:

This is approach to design the responsive web design for the mobiles first and then move on the higher resolutions like tablet, PCs etc.

7) Comment on the tools used for reviewing and testing the website

Chrome device simulator

Simulator is a software program that allows your mobile to imitate the features of another computer or mobile software you want them to imitate by installing them to your computer or Mobile. It tests mobile and responsive web pages on your desktop. The main objective of the Chrome device simulator is to simulate the internal state of the objects as close as it possible. The testing team is used the Chrome device simulator to test the external behaviour of mobile such as; making transaction, calculating, etc.

The Chrome device simulator is developed in high level languages. It might be difficult in debugging. In other words, we can say that the Chrome device simulator is the partial re-implementation of the original software.

To test the resolution of the website pages, tester just have to choose the mobile screen resolution given there by clicking that and the active page will be open in the separate window in that resolution.

Main features:

works with local files too
Same scrollbars as in mobile devices
Ten predefined sizes of screen available
Use of mobile user agents
pixel correct window size

Additional Information

Version: 1.2.1

Updated: April 17, 2016

Size: 18.14KiB

Language: English

Mobile browser emulator

Advantages

It is cost efficient and very helpful when the dead line is short to provide the text execution result and the tester doesn’t have the time to purchase the new mobile device for the testing.
It’s make the user to feel, close towards the real mobile device while testing.
The simulator is open source software which can be easily downloaded and used by anyone.
It is mostly used to test the web application. The users just have to paste the URL of the website in it to test the pages of the website.
Simulator provides the easy capturing of screenshot facility in Microsoft office.

Disadvantages

The Chrome device simulator is unable to simulate the issues related to battery.
It is unable to simulate the interrupts for incoming calls and messages.
If the real mobile device is in black or in sunlight, it cannot properly simulate the real colour display of the mobile devices
The simulator performance is less than the original device at a time.
It is mostly suitable for certain types of functional test executions.
The simulator also creates the misconception for users who would be using the same validation because the memory available in the simulator is tending to be far more than the real devices.

Similar devices

Chrome DevTools

The Chrome devtools is the mode of device to build the mobile-first and fully responsive website. It is mainly used to simulate the wide range of devices and their capability.

Ripple Emulator (Beta)

Ripple is a type of emulator which supports the many platform of mobile environment. It is mainly used to reduce the challenges being faced by the mobile device developer.

Conclusion

In this assignment the major work is done to get a hand in simulating tools. The nominated website has been checked on different resolutions as stated.Testing is the important phase of product cycle and need to be performed efficiently. Hence this website is tested in Google chrome simulator by creating an environment that is almost similar to real world. It provides good reviews and can find out bugs in an easier and efficient manner. This document proves to be good solution to make any website responsive by following responsive web design principles.

References

Treehouse Blog. (2014). The 2014 Guide to Responsive Web Design - Treehouse Blog. [online] Available at: http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design [Accessed 11 May 2016].
Simulate Mobile Devices with Device Mode | Web Tools - Google Developers. (2016). Simulate Mobile Devices with Device Mode | Web Tools - Google Developers. [online] Available at: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en [Accessed 11 May 2016].
Chrome.google.com. (2016).mobile browser emulator. [online] Available at: https://chrome.google.com/webstore/detail/mobile-browser