Index and Landscape)Recommendation for Large Display( Portrait and Landscape)ConclusionTake

Index IntroductionPurpose To state the reason behind the report.Objective.What is to be accomplished by the report.DiscussionOverview and descriptionTo identify and skim the website.Main featuresIdentify and elaborate the features of website.AspectsPositive AspectsIdentify the positive aspectsNegative AspectsIdentify the negative aspectsExternal reviewOpinion 1Opinion 2Tools Used for reviewAdvantages of such toolsDisadvantages of such toolsDescribe the tools used to analyse the website.Similar Tools availableRecommendationBased on analysis give recommendation  if changes are needed or why if not.Recommendation for Tiny display( Portrait and Landscape)Recommendation for Medium display( Portrait and Landscape)Recommendation for Large Display( Portrait and Landscape)ConclusionTake decision after analysing.References Cite the articles referenced in the report. Responsive Web Design (RWD)Introduction.1.1 PurposeThe purpose of the report is to provide an effective evaluation of the Website: https://www.qut.edu.au. Our main focus is on the Responsiveness of the website i.e. whether it can be properly viewed on different devices with ease.The above website shows the content related to Queensland University of Technology (QUT).I Reviewed https://www.qut.edu.au website using Google Chrome’s device simulator.1.2 ObjectiveRWD (Responsive Web Design) is a web design technique aimed at designing webpages that are optimized for a wide range of devices keeping this in mind the objective of the report is: To prevent undesirable outcomes like image distortion, text-misalignment, etc.To check if the website has aesthetic appeal to the user.To analyse if the User Interface is intuitive.Make sure that the website is easy to use on different devices like smartphones, tablets and computers. To make sure that the concerned website meets Responsive Web Design standards.2.  Discussion2.1 OverviewThe concerned website provides details about Queensland University of Technology(QUT), the courses it offers, research opportunities, news of the university, alumni chapters. It consists of a Header: QUT logo, Contact details, search bar, Login page linkNavigation bar: Study, Research, Industry, About, Alumni, International Students, News, Professional development.Carousel : Carousel consists of four images with one button each.Also, it has two buttons for sliding carousel images left and right.Content area: Details about courses, research at QUT, services for industry sector and campus map and the facilities offered. Footer : Links to various sections and sub-sections of website, social-media icons, and other copyright, disclaimer, privacy, etc informations.I went over the pages linked by the navigation bar. Most of them except Research have similar design and are differing only in the content area.  The professional development page differs a bit, but does not lack in aesthetic appeal or information organisation.2.2 Main FeaturesMobile Compatibility6: The site is mobile friendly and is easy to navigate but the aesthetic appeal is decreased in the content area due to lists.Information Architecture: The information is presented in an organised manner so that required information can be accessed easily.1Content Formatting: The content is concise enough to skim quickly but also contains enough details for user to understand easily about what it contains. Contact Information:The contact page provides necessary details like phone numbers, emails and is categorized based on type of enquiry. It also provides the staff’s contact details.Media Queries:The media queries  are properly used on images and videos making it compatible with all types of devices. Load Time:The load time is really quick on computer but it can be optimised by removing external CSS file links and combining JS files if possible.2Browser Consistency:The site is compatible on all major browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Microsoft Edge.Color SchemeThe color scheme is good enough in most parts but it lacks in some areas like content area.32.3 Aspects2.3.1 Positive AspectsWebsite is nicely designed. It is device compatible on all types of devices.Content on the home page is highly abstract.Clear, user friendly navigation.All media follows w3c standards and consists of alt attribute for media contents.Navigation Bar is responsive and changes to side slider with vertical orientation to fit to smaller screens.Website works well in both portrait and landscape layoutMedia queries are working satisfactorily on all media elements2.3.2 Negative AspectsUniversity logo in header section is not noticeable enough for mobile screen.Footer contents gets crammed for small screen sizes.Content area is not attractive enough and looks like a list.2.4 External Review External review is important in the life cycle especially  development phase of any product. The developers may have a bias towards their product so  external reviewers can provide an unbiased opinion which can highlight different aspects requiring change. So we asked two persons from different backgrounds as  to review the website and provide their views.2.4.1 Opinion 1NameBryan BrownAge34GenderMaleProfessionMechanical EngineerBryan’s opinion The website is good looking and informative, the header and carousel especially stand out. It’s a little bit clumsy, it feels like so much of the data is been thrown at you.One of the links7 I tried to visit is broken and gives 404 Not Found error .2.4.2 Opinion 2NameMr. Sam RasheyAge51GenderMaleProfessionBusinessmanSam’s OpinionSecond I asked to review my friend Mr.Sam Rashey, He said, the colour combination is good and using it doesn’t lead to eye strain.He added, website is equally informative and easy to use in all type of devices. So, anyone can access it using any device without degradation in experience. Navigation bar is well structured, but the footer needs to be lightened as it contains a lot of data which makes it look clumsy and less useful.-2.5 Tools Responsive Web Design is a web design technique which is compatible and easily readable in each and every type of device. Thus, to analyse a website is responsive or not, we need to use advanced emulator tools.Emulator tools are a common platform where the display of website can be seen in different types of devices.In the emulator tools we can analyse the website and its features in different screen sizes by increasing and decreasing screen width-height. 2.5.1 Advantages of using an emulator are:No need for different devices to check website on different resolutions.Saves time as it is quicker to use.2.5.2 Disadvantages of using an emulator:Rendering Engine of the emulator may be different from the actual device.Sometimes there are few differences between the Emulator’s rendering and the actual device view.2.5.3 Tools Used for analysisI have used Chrome Emulator for my testing of Responsive Web Designing. Its very helpful and advanced tool for emulation of website on many different types of devices and check about the responsibility. Chrome Emulator provides us with advantages like – ViewportUser AgentDifferent user agents can be selected like iPhone, Nokia Lumia smartphone, computer screen, tablet screen as to provide simulation of most common screen sizes. Also, custom screen sizes can be applied and corresponding changes can be analysed.Allows manipulation of the emulated deviceWorking with screen propertiesProvides a huge number of choices based on the type of device,screen sizes, and  even different brands.2.5.4 Similar tool availableVarious tools that can be used for cross-browser testing and RWD testing are as follows:Firefox SimulatorBrowserShotsBrowser SandboxnetrendererMydebugbarMicrosoft EdgeWebshotBrowseraBrowserStack3. Recommendation3.1 Recommendation for Tiny display Fig 3.1.1When width of device becomes tiny pictures get cut as  Media-Queries are not working in ‘About’  page. Carousel image gets cut in smaller width devices5It must be checked that media queries work properly in all widths of devices.Fig 3.1.2Footer in clumsy, text is not clear enough, footer items must be arranged with ample amount of space between them3.2 Recommendation for Medium Display SizeFig 3.2.1Left sliding arrow overlaps with the image , thus proper css and media queries must be used to make it look good.Fig 3.2.2Navigation bar transforms to Navigation Menu on decreasing screen width, The navigation bar that appears is very basic and unattractive, so navigation bar can be made more attractive.4Fig 3.2.3Size of Logo decreases with size of screen, thus after a certain width logo becomes unattractive thus, logo in the header must be made of a fixed width such that it can be visible even in low-width devicesFig 3.2.4Appropriate spaces must be left in between the footer contents for low-width using media-queriesFig 3.2.5The university motto and ‘Contact Us’ link are too close. The ‘Contact Us’ link can be replaced by an icon of a telephone.Fig 3.2.6Map-Size is not proper , instead map should be of full device width.Fig 3.2.7Part of some text on the  right side is hidden and no horizontal scrollbar is available. Here also we can use media query.Fig 3.2.8Search bar and navigation bar on the top are only half visible. Media queries can be properly used here3.3Recommendation for Large Display Size Fig 3.3.1Logo is not of proper size, header background colour must be kept different from logo text colour4. ConclusionI have thoroughly analysed the website  https://www.qut.edu.au using chrome emulator and found some bugs and thus made some recommendation based on the bugs identified.I have analysed the website in basically three types of devices having tiny, medium and large screen sizes. I also asked two of my friends to review and got their suggestions. Thus finally using the observations and findings, recommendations and user-reviews I have finally  made the following conclusions.Conclusion of my analysis on the given website https://www.qut.edu.au are as follows -Colour Combination – Colour Combination is nice, it makes website strain free and an interesting formal look.Mobile Compatible – Excluding some of the errors of ‘not working media queries’ as discussed in recommendation website is well designed to be mobile compatible. Navigation Bar/Menu – Website has navigation bar for long widths and menus for less width devices, which makes navigation bar easy to use and provides good UX. But a lot of work needs to be done on the UI of navigation bar and navigation menu to make it more interesting.404 Errors –  There are some broken links which must be fixed or removed as soon as possible.Media Queries – Media Queries aren’t working properly in many of the pages, due to which some of the pictures and text gets hidden or cut in smaller devices.Carousel – Carousel is nicely designed, but for smaller device media queries needs to be used in images so that pictures of carousel don’t get cut.Footer – Footer looks very clumsy due to a lot of information put together, also, in smaller device it becomes difficult to differentiate two items, so spaces must be increased between all the items of  footer and some of the things must be shifted from footer to content-area.5. ReferencesTo analyse the given website we used various resources in our report to learn and understand about the Responsive Web Design and to check the characteristics of the same. Here are the resources we have cited in our report. 1https://www.linkedin.com/pulse/top-10-characteristics-qualities-good-website-mahmudul-hasan2https://tools.pingdom.com/#!/GnOhu/https://www.qut.edu.au/3https://neilpatel.com/blog/website-color-scheme/4https://medium.com/level-up-web/20-responsive-navigation-solutions-examples-codes-21644390afeb5https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries6https://www.ibm.com/support/knowledgecenter/en/SSZLC2_7.0.0/com.ibm.commerce.starterstores.doc/concepts/csmaurorarwd_dup.htm7https://www.qut.edu.au/study/fees-and-scholarships?a=564699