Implementing Responsive Web Design Enhanced -Myassignmenthelp.Com

Question: Discuss About The Implementing Responsive Web Design Enhanced? Answer: Introduction There used to be a time when web designers and clients had to spend extra resources and bucks in the designing and development of separate websites to for different screens. Now, various gadgets with a variety of screen resolutions can run the same website. The Queensland University of Technology, in their official website https://www.qut.edu.au/, has adapted a responsive web design layout. The website is aimed at providing an interactive and informative interface to the students from the university or the aspirants who wish to seek admission in the university. The websites purpose and objectives are described in detail through this report. Certain features of the website shall also be highlighted. This report draws keen attention to the interactive and the design aspects of their responsive website. The website is critically evaluated with the help of the Responsive Web Design (RWD) principles and the Google Chrome Simulator to test various display simulations. The Queensland University of Technology website The QUT website is the official business website of this university from Queensland. The University is counted amongst one of the most famous universities in Australia. Through the website, they wish to reach out to millions all over the world and promote their institute. The website helps the viewers to learn everything about the website. The website provides detailed information about the various courses that are offered by the University. The Universities research plans are also mentioned in the website. The aspirants can browse through the research section of the website and gain knowledge about the universitys way of conducting research and studies. Further, the website highlights how the University offers customized corporate education to enhance their students industry experience before they move out into the corporate world. The website also preaches about the Universitys initiatives to provide government and private sector internship opportunities, alongside research and car eer consultancy. Lastly, the website tends to educate the viewers with the campus map. They provide details of the facilities that each of their campus offers, in addition to the extra-curricular events and programs held in the various public venues around the city. Being a university website, qut.edu.au provides all the necessary features required by the University students or other aspirants to know more about their education in the university. Special Features The website offers quite a handsome set of features that are useful for educational purposes. The website provides a useful navigation bar that assists the user to browse through different sections or pages of the website. A navigation bar within a webpage is always necessary. It is a form of user interface that consists of precious links to take the users to other sections of the website. This clearly means that, in whichever page is the user surfing currently, with the guidance of the navigation bar he can promptly access other pages as well. In addition to the navigation bar feature, the website also has a good search engine optimization. Whenever the search engines are hit with a search query about the Queensland University of Technology, the website and its other modules are shown in the results. This makes it easy for the users to search for specific information about the website. This feature also helps the University to reach out to the public, thus enhancing its publicity aspects. The website contains a well-featured list of contact details of the university, its various campuses and of the different sections of education that the University offers. The students, guardians and aspirants are offered with this feature to reach out to the university and query their claims, complaints, concerns or questions. The Search Staff and Contact feature helps the users to search for the contacts of particular staff member or of specific course departments. A live map with pointer locations to the various campuses is also attached with navigable abilities. The website allows viewers to login to the website and access the services as a registered user. For new visitors, the website has the feature to sign in as a member. The visitors are asked to link their Australian Access Federation account to the website account in order to sign in. Certain security measures are also adapted in this process, which the QUT website puts in. These security features are to be discussed in details in a later section of the report. The News section of the website is a phenomenal feature. The section is flashed regularly with news and updates from the research, technological and other educational fields, from all over QUT. In addition, the facility that it offers for International students to educate themselves about the ongoing and course details of the University is a special point out as well. The social media handle links are elegantly displayed beneath every page of the website. This is a very important feature offered by almost every modern day websites. This feature serves various important functions for the promotion and adds greatly to the usability aspects of the website. Lastly, the main feature of any website that attracts the majority of traffic is the design of it. The responsive design of the website is a key lookout. A responsive web design is the need of the hour for any website. This allows users to visit and browse the website from any device of their choice, without having to worry about the visibility layout issues due to change in screen resolution (Bryant and Jones 2012). All the above mentioned features shall be discussed in details with keen attention towards the pros and cons of each. This will help to identify all the positive and negative aspects of the website. Critical evaluation In this section, the website will be critically evaluated with regards to identifying all positive and negative aspects of its features. The website has quite a quality amount of features available for the visitors. All the features that have been mentioned above are extremely useful but in the same time, they need evaluation. The ability of these features must be tested to get a clear overview about the working of the same. Each feature that the website provides are to be thoroughly used and tested in different screen resolutions and evaluated accordingly. The positive aspects of the website Not all features are perfectly implemented in the website. However, there are plenty of great design implementations highlighted through the website. The website promises the best operational and servicing facilities through some of their features. The positive aspects of the website are listed and discussed below: Responsive relative layout: The website can remodel itself according to the screen size on which it is accessed from. After running the website on all the recommended screen resolutions through the Google Chrome Simulator, it can be stated that the website can easily adapt itself with the changing screen sizes. All the options, tabs, images and texts presented in the website align themselves perfectly on every available screen resolutions or devices. Unlike static units of a non-responsive webpage where contents maintain their sizes no matter the resolution changes and provide a poor interface, the relative layout is a smart and useful technique. One great aspect of resolution-based customization can be observed in the navigation bar adjustment. In medium sized mobile-based screens like 480x640 or even smaller 200x320, the navigation bar does not appear in the same way as it does in the broad-screen view. The navigation tabs coil up into one unit and is found in the navigation button. The functioning of the tabs, however remain the same. The Navigation Bar: The navigation bar that bosses the entire websites road map has been designed with utter supremacy. Each of the tabs presented in the navigation bar allow flexible hyper-linking to the other important pages on the website. The visitors can easily navigate back and forth a webpage through this. However, here it has been designed with an eye to do more than just simple webpage navigation. On hovering over each tab of the navigation bar, the user can view the respective contents of that particular page in a gist. On hovering away from the respective tab, the floating information page disappears. This helps the users to decide beforehand on whether to visit the tab or not, depending on its contents. These tabs are found inside the navigation buttons in smaller screens as mentioned above. Flow of contents: The contents of the website do not coincide with each other when the screen size is altered. Rather, they adjust their layout accordingly to maintain the original spacing and margin specifications. The figure below shows this aspect of the website with contrast to other static designs. The Search Feature: The search option works pretty fast and with utmost accuracy. It also provides the user with the opportunity to navigate between the fields that they wish to search in. This makes it simpler to search for the exact query, amongst multiple similar results. Use of graphics: The graphical images used in the website are of high quality. The images do not pixelate at any level of stretching. It must also be noted that the images used are very attractive and they help to convey the exact message of the respective web page. The Negative aspects of the website On close study of the website, several more aspects of the website could be framed out. Apart from the above mentioned pros of the website and its design, below, the negative aspects of the same shall be highlighted. They are as follows: The cover image layout: On reducing the screen size in the simulator to fit the size of a medium or small mobile device, the cover image layout does not fit in properly. The image crops out from one side. This portrays a negative aspect of the websites design. The image change buttons on the cover images: On opening the website on a smaller screen, these buttons disappear. This seems to be quite a mentionable flaw in the design of the website. The ability to swipe among these images also disappears in the mobile versions. In order to make the design responsive, the designer must have had to drop this feature. Reviews by two other persons While reviewing the site we found that there are some links on the pages that contains a long block of text that is intended to use meta tags. This meta tags helps the web sites to have a better rank in the search engine results so that the existing and the potential users find the sites easily without spending time and effort in searching the site. In addition to that, some of the internal links does not have any text indicating their destination where as it is important for the links to describe their destination. This helps in improving both SEO (search engine optimization) and the users interaction with the site. While testing and analyzing the site we found that, with a slow internet speed the website is rendered multiple times on the device screen. This happened due to the lack of use of the height and width tags for the images on the webpages. Recommendations for the improvements of the site In order to improve the quality of the user experience as well as its online presence. In our investigation, we found that, the there are some page in the website that are not optimized using the CSS for the Printing purpose. Therefore, it is suggested to the use the required CSS to make the pages optimized for printing. Again, the images on different pages of this site are not placed on the pages using the height and width HTML tags. Due to this reason, multiple images are stretched on the web pages of the site and the pages of the site took more time to load completely in the browser. Even though these tags (height and width tags) are optional but these tags help the browsers to arrange the page with a faster speed while keeping the defined image size on the pages of the site. In further investigation of the site, we found that the site does not use any sitemap. The sitemap is important for a site as well as for its visitors. Use of sitemaps provides multiple benefits for the website, the sitemaps not only make the navigation process easier and better but also it helps the site to improve the visibility in the search results of different search engines. It offers the prospect to notify the search engines immediately after any modifications on the pages of the web site. Relevance with the RWD principle The pages of the given site (qut.edu.au) maintained the consistent layout and style across the total site. In addition to that, the contents on the pages are placed at the appropriate locations as required to the site hierarchy. After completing any action on the different pages of the website, the visitor or the user gets appropriate responses against their actions. On the pages, there are sufficient information about their positions in between a process. For the users the pages of the site also provide simple error handling for the users who may have entered some invalid input in some input field and as well as in a search field on the web pages. In addition to that the pages of the visitors or the users of the site can easily reverse their action at any point of time they realize that they have committed some mistake in their previous actions (Mohorovi?i? 2013). On the pages of the site, there are sufficient visual indications or prompts for the visitors/user so that they can find out the functionality of a control item. Therefore, the users do not have to recall things in order to understand the ongoing process on the pages. Simulation software tools used for review For the review of the site, we have used the google developer tools. The advantage and the disadvantages of these tools are described below; Advantages Use of this simulation tool helps in the testing of the website in multiple screen sizes for a provided smartphone/tablet device, which leads to lessening the cost for the testing of the websites. In addition to that, one of the most important factors in case of mobile and tablet devices is the touch event, which cannot be done on the desktops whereas chrome device emulator can easily imitate and respond against single touch events. Disadvantages Even though the google chrome device emulator is helpful in testing the site in different view ports, but as the emulator cannot emulate the rendering engine of a physical device then it represents some erroneous results. The rendering engine of a site consist of codes that interprets the HTML, CSS and JS for a site and presents in front of the user of the site. Other tools to test responsiveness responsinator.com: This is an online tool that checks the responsiveness of a site using the pixel values and orientation of the device (Kim 2013). Screenfly: This is another testing site that tests a site with different pixel values and screen lengths. In addition to that, the tool detects the URL of the entered site if it has a mobile version and redirects as well as represents the site. Conclusion As a conclusion, it can be stated that even though the website provides the viewers with all necessary information and couple of interesting features, it lags behind in certain aspects of designing. The report also states that the use of graphics and layouts are fine enough to make it look attractive on any device. However, the reviews from the peers bring to light that the website has serious flaws in the implementation of responsive design concepts. The use of proper CSS and HTML code concepts is recommended along with site mapping. References Bryant, J. and Jones, M., 2012. Responsive web design. InPro HTML5 Performance(pp. 37-49). Apress, Berkeley, CA. Kim, B., 2013. Responsive web design, discoverability, and mobile challenge.Library technology reports,49(6), pp.29-39. Mohorovi?i?, S., 2013, May. Implementing responsive web design for enhanced web presence. InInformation Communication Technology Electronics Microelectronics (MIPRO), 2013 36th International Convention on(pp. 1206-1210). IEEE. QUT. (2018).Home. [online] Available at: