Responsive Web Design Analysis of National Geographic Website

This report analyzes the responsive web design of the National Geographic website using Google Chrome's device simulator. It examines the website's features, positive and negative aspects, user reviews, and responsive design principles. The report also includes a comparison of Chrome and Firefox emulators, highlighting their advantages and disadvantages. Finally, recommendations for website enhancement are provided.

Table of Contents
Introduction................................................................................................................................2
Overview....................................................................................................................................3
Description.................................................................................................................................3
National Geographic Website....................................................................................................4
Features of the website...............................................................................................................4
Positive and negative aspects of the website..............................................................................5
User reviews...............................................................................................................................6
Responsive web design..............................................................................................................8
Simulator tool...........................................................................................................................12
Recommendations....................................................................................................................18
Conclusion................................................................................................................................19
References................................................................................................................................20
List of figures
Figure 1 Large resolution...........................................................................................................8
Figure 2 Medium resolution.......................................................................................................9
Figure 3 Tiny resolution...........................................................................................................10
Figure 4 Chrome simulator large display.................................................................................13
Figure 5 Chrome simulator medium display............................................................................14
Figure 6 Chrome simulator tiny display...................................................................................15
Figure 7 Firefox simulator large display..................................................................................16
Figure 8 Firefox simulator medium display.............................................................................16
Figure 9 Firefox simulator tiny display....................................................................................17

Introduction
This web design report for national geographic is all around to investigation the webpage
with the assistance of the device simulator of the Google Chrome. There is differing kind of
the site is blessing and their different points of interest are available at the site. The
measurements or data is in expressions of the magazines or in expressions of the unmarried
printed substance or facts. By utilizing the web website, it’s clear to deal with every one of
the realities and magazines. While creating the site, there might be a necessity to build up the
responsive web webpage for the client. The responsive web webpage is the individuals who
set aside significantly less interval for stacking and can ready to expose in the majority of the
particular points of view. The perspectives are processing gadget, cell and so on. Every one
of the devices has the diverse resolutions. A need to build up the channel website that might
be balanced in all state of the determination occurred. To checks the responsive web website,
there are numerous test to be performed for complete investigation of the web webpage over
the principles of RWD. This archive breaks down the national geographic site by using the
device simulator that is Google Chrome's and the principles of the RWD.

Overview
Here is the brief discussion on the website I have nominated. The nominated responsive
website is the national geographic website. National geography is the global organization for
protecting and exploring the beauties around the planet. National geography organization also
funds numerous projects of research and conservation over the planet. Also national
geography inspires the new generation through different programmes organized. The
organization has taken different initiatives in education and research field.
Description
The website of an organization provides the huge amount of information about the different
things that exist around the whole solar system. The different portion of the website
incorporates nature beauty that includes flora and fauna, scientific elements and geographic
features of the earth. The website displays numerous images and details by the amazing
photographers and the writers. The website also contains different videos of the lifestyle of
different wildlife, and human in different regions around the world. The website also has
different pages for photography, travel, animals, adventure, history and more. The
photography page contains the images of different wildlife creatures of all land, air and water.
The science page contains the different scientific aspects like the space components,
asteroids, medicines and the solar system. The travel page includes the different countries and
cultures around the world and the world amazing sights like hills, mountains, lakes, seas and
more. The animal incorporates the different images of animals from different regions of the
planet. History page contains the different elements images from the ancient age and their
description and use (Geographic, 2018)
.

National Geographic Website
It is the kind of organization that is drawing in programming so as to motivate the people to
discover about the overall population events and locations of universes. The national
geographic channel has large years in the research, and continues on understanding back tales
the most interesting activities that had been going on finished the arena. This additionally has
the remarkable notoriety for the outwardly energizing and convincing narrating. Talk about
the national geography then it is acknowledged place of the savvy, motivating and critical
real leisure approximately the universe, lifestyles and the whole lot between them.
Features of the website
The website of national geographic is set that deliver the records about the geological to the
client. This data can be given the assistance of the recordings and the portion of the content
file. Simultaneously as the website page is all on-going here are a brilliant deal of hobby
indicates up at the pages present on the website.
At the first web page, page contains the body, header and footer of the web page. The frame
of the web page is distributed into 3 sections. On the top of page website contains the slider
that has the slide and the clock demonstrates the 3 recordings are successive above the slider.
Around 3 recordings are strolling above the slider. From that factor onward, the web page is
isolated into three sections the most latest, what is drifting, and the final one is selected. All
those 3 regions of the web pages include the unique type of recordings, insights about the
modern-day news and the actions recognized with nature and geology.
At the landing web page, this offers the menu segment to the purchaser, with the assistance of
the client who can gear up to go to diverse pages. The diverse web pages are: recordings,
Explore, information TV, utility and that's simply the start. These menus have a feature that
they are distributed into alternate menus. On header of the web page, features are provided
for the consumer to search or find, login and enlist, and the opportunity for twitter, Facebook
login. On the base of the web page, every one of the diffused factors are seems about the web
page and look into the entire menu alternative at the base of the web page.
Each web pages within the website that is explore, games, about area takes after a selected
plan of the framework; these characterizes the exquisite arrangement of the web page and
take after the circulation of the web pages. Beneath builds up the examiner for the clients of
the web page, the appropriate response may be given later for full usage of the national
geographic website (Hou, 2014)
.

Positive and negative aspects of the website
Every website has some positive aspects and at same time have some flaws, error. The
responsive website chosen that is national geographic website have some positive and
negative aspects.
Positive aspects
 Super-clean look with innovative design.
 The new stylish modifies high impact visuals with uncluttered typography to
introduce some other across the board in comfort and likewise a bigger canvas to see
National Geographic's exceptionally outstanding photography.
 Website has relevant content.
 The look and view of the website is professional.
 Use of graphics and font quality is good.
 Standard principles are used for designing the website.
 The website could be explored by login with the Facebook or twitter accounts.
Negative aspects
 Website lacks the advance search option.
 Colour of the visited link does not change
 Too much content and images on the same page.
 Colours used in the website are little dark and is uncomfortable for the eyes to explore
the website.
 Poor Accessibility
 A text size somewhere is wrong and with no separation from the background colours.

User reviews
For the review on the national geographic website I have chosen two users and have asked
them to explore the website and provide their reviews depending on their experience. Below
is the user review for national geographic website.
User 1 feedback
Table 1 User 1 Review
Name: Oliver, Age: 21, Gender: Female,
Profession: Student
S.no Questions 5 4 3 2 1
1 How easy the navigation between the pages of the
website?

2 Was the information available you are looking for? 
3 How appealing you think the website is? 
4 Overall is the website easy to explore? 
5 Did you find the content and information valuable
present on the website?

6 How was the loading performance of the website? 
7 Did you think some features complex over the website? 
8 Does the website help you in anyways? 
9 Does the website require a more configuration device to
load?

10 Please review the website on the scale of 5. 
11 Any additional feedback you would like to give?
Love that National Geographic has a variety of different premiums for undergrads to find out
about and investigate in this site. This site has numerous awesome instructive movies.
Children can comparably their pleasure on concentrate by playing among the computer
games and artworks.

User 2 feedback
Table 2 User 2 Review
Name: Henry , Age: 43, Gender: Male,
Profession: Professor
S.no Questions 5 4 3 2 1
1 How easy the navigation between the pages of the
website?

2 Was the information available you are looking for? 
3 How appealing you think the website is? 
4 Overall is the website easy to explore? 
5 Did you find the content and information valuable
present on the website?

6 How was the loading performance of the website? 
7 Did you think some features complex over the website? 
8 Does the website help you in anyways? 
9 Does the website require a more configuration device to
load?

10 Please review the website on the scale of 5. 
11 Any additional feedback you would like to give?
This is an amazing free web webpage that has stores of motion pictures and resources. You
should simply be a piece of with your Facebook account. The National Geographic
magazines are an immortal fortune to utilize and now they've sprung up through films and
pictures. When you dispatch your understudies appropriate here to do contemplate, you
realize that they will now not discover anything that they are never again envisioned moving
into. There is a zone furthermore wherein you can play instructive computer games, in a
region set up for clean searching for your understudies. The site is laid out into classes with
the goal that you can easily find a video in regards to your subject of intrigue.
Based on the above review and feedback overall website is easy and appropriately design.
Some modifications are needed for enhancement of the website (Byrne, Heavey, and Byrne,
2010)
.

Responsive web design
Stating the responsive designing of website, it is the finest practice to resolve the issues of the
different screens and simultaneously there is a difficulty in print perspective. There are
following nine values of the responsive web plan (Nene, 2015).
Figure 1 Large resolution

Figure 2 Medium resolution

Figure 3 Tiny resolution
There are nine principles that RWD includes
Responsive versus versatile website composition
This is an essential thought of the RWD. At a similar factor, this creases meet however isn't
generally same. The two strategies are a supplement to each unique. There is not any
legitimate or wrong approach to do; it is dependent upon the substance material above the
web site page (Bryant,and Jones, 2012).
The flow
This is other rule of responsive site, because the extent of the web screen turn out to be littler,
at that point the substance started to soak up extra vertical area and all of the cloth below
could be driven down.
Relative units
The image could be portable, work area display screen or a few different among them i.e. the
photograph and the statistics are in an appropriate proportion inside the framework.

Breakpoints:
Alludes to the division then this permit to exchange the design at predefined focuses, for
cases in the work region the web site has the three sections and if a span of the web page is
lessening that derives into the versatile vision then these movements into the unmarried
phase.
Min and greatest traits
A large number of the occurrences the substance of the web pages took up the entire size of
the show, on the grounds that the cell contraptions, however having a similar substance
material extending to the entire size of the Television show screen regularly makes less feel.
Settled objects
As the extent of the web pages is transformed, at that point the whole protest is moved in the
meantime. This demonstrates the best possible nourishment of the pages.
Work region or portable first
As meet with the web webpage it's far much not influenced the contraption, on the off chance
that it was settled inside the cell or into the work area. There are more obstructions and
empowers you are making choices if the engineer creates in the cell first (Natda, 2013).
Framework textual patterns and internet text patterns
This is a unique feature among different portions of the web page; this creates the web page
greater responsive. While building up the website online, it is essential to builds up the each
one of the textual patterns into the site pages.
Bitmap or snap shots or vector
In the event that there are various data or selected showy impacts at that point there might be
need to utilize the bitmap. Alludes to the gif, png or jpg then it has to utilize the bitmap. If
there should arise an occurrence of symbol or SVG, it wants to utilize the vector.

Simulator tool
Simulator tool is the impression of the task of a certifiable websites or structure. The demo of
representing something primarily wants that a prototype must be produced; this prototype
expresses the practices, key characteristics, and fundamentals of the selected physical or
theoretical frame or process. For the purpose of testing I have chosen the chrome device
simulator (Kim, Lim, and Hwang, 2014).
Chrome device simulator
The utilization of the Google Chrome's tool is to check website, this is the apparatuses that
are accessible inside the Google chrome. By the help of this, it is something but difficult to
have a look at the website pages over the framework (Mobile1st, 2018).
Advantages of chrome device simulator
1. This gives the unique selections to alternate the determination of the pages.
2. This gives the picks to pick out the one of a kind gadget.
3. Provides the purchaser to utilize the numerous capacities on a comparable degree.
4. This gives customer to make use of the machine association
5. Easy to use the chrome simulator.
Disadvantages of chrome device simulator
1. Lacking new features.
2. Provides less arrangements options for the HTML and CSS.
3. Less speed compared to Firefox simulator.
4. It doesn’t offers accurate testing of the mobile device.

Figure 4 Chrome simulator large display

Figure 5 Chrome simulator medium display

Figure 6 Chrome simulator tiny display
Firefox emulator
The Firefox emulator is like Chrome. It is observed below the TOOLS menu > Web
Developer > Responsive Design View. You can honestly snap and drag the compartment bar
to make new/custom sizes (MDN Web Docs, 2015).
Advantages of Firefox emulator
1. Examiner UI with modern and latest animations.
2. Web Console has server logging option.
3. Rapidly find out the determine that outmoded a CSS revelation
4. "Use in Console" putting menu issue in Inspector
5. New sidebar UI for Web IDE.
6. Firebug is the Firefox components assessor and is introduced as an extra.
Disadvantages
 It has restricted size options.

 More complex to use.
Figure 7 Firefox simulator large display
Figure 8 Firefox simulator medium display

Figure 9 Firefox simulator tiny display

Recommendations
Here are some recommendations that I have made for the website enhancement;
 The advance search needs to be added to the website for better and enhance searching.
As the advance search helps in more filtration of the content and information required.
 Grid needs to be added as the website has too much content and pictures on the single
web page that makes website look heavy and hard to explore.
 The colours of text and background should be chosen appropriately for better
visibility status.
 Error message acknowledgement must be added for better understanding of the
problem when user clicks on submit button without entering the required information
and details.
 Visited links should be highlighted properly with different colours (Pichler, 2018).

Conclusion
Here I conclude with my report; this review report is set the utilization of Google Chrome's
machine test contraption over the nation-wide land site page. The national geographic
website is the website that supplies the records about flora and fauna by procedures for record
and accounts. This review reports offers the examination and check the webpages in the
websites and affirms is that this site is responsive in nature or not. Afterward discovering the
zone of progress and elucidates in the record. The examination is finished with the assistance
and review of the 2-other client of the webpage of the national geographic website and gets
the feedback from the two. At the finish of the record gives a couple of idea to the site and
offers the records about the change.

References
Bryant, J. and Jones, M., 2012. Responsive web design. In Pro HTML5 Performance (pp. 37-
49). Apress, Berkeley, CA.
Natda, K.V., 2013. Responsive web design. Eduvantage, 1(1).
Nene, A.R., 2015. Responsive Web Design. International Journal Of Engineering And
Computer Science, 4(03).
Kim, C.G., Lim, J.H. and Hwang, A.Y., LG CNS CO Ltd, 2014. Responsive user interface
engine for display devices. U.S. Patent Application 13/591,379.
Byrne, J., Heavey, C. and Byrne, P.J., 2010. A review of Web-based simulation and
supporting tools. Simulation modelling practice and theory, 18(3), pp.253-276.
Hou, Z., Intel Corp, 2014. Simulation of web applications and secondary devices in a web
browser, web application development tools, and methods using the same. U.S. Patent
8,819,624.
Geographic, N. (2018). National Geographic. Viewed 15 April 2018, from
http://www.nationalgeographic.com.au/
Pichler, R. (2018). 10 Tips for Writing Good User Stories. Viewed 15 April 2018, from
https://www.romanpichler.com/blog/10-tips-writing-good-user-stories/
MDN Web Docs (2015). Firefox Developer Tools. Viewed 10 May 2018 from
https://developer.mozilla.org/son/docs/Tools.
Mobile1st (2018). Chrome’s Emulator for Your Responsive Design Mobile Testing. Viewed
10 May 2018 from https://mobile1st.com/can-trust-chromes-built-emulator/.