Overview of the Website
This document is aimed at providing a critical analysis of the nominated website https://www.newsweek.com to show the interactive design and responsiveness aspects of the website. The findings are based on a responsive web design tool called Google device simulator which provides features such as simulating the appearance of the website across various devices to sow how the user interacts with the website across the various devices.
According to Newsweek, the company describes Newsweek as a digital property available across platforms and devices. This means that Newsweek can be accessed across any platform capable of handling a webpage and on any device capable of handling such platforms. The structure of the website can be broken down into three components.
- Navigation section
- Content section
- Footer section
This tab is the part of the website that appears on the top most part of the website. The navigation tab is a row containing the logo of the website and a menu with different many options that enable the user to navigate through the various sections of the website. The menu can be categorized the website into sections where by the website can be categorized in parts. These parts are.
- US- this part of the menu takes the users of the website to the US version of the website.
- World- this part of the menu takes the users to the international version of the website.
- Business- The business link of the navigation opens the business category of the website.
- Tech & Science- This link takes users of the website to the science and technology part of the website.
- Culture- The cultural news and articles are found in this section.
- Sports- the sport option in the navigation tab takes users of the website to the sports section of the website.
- Opinion- the opinion link takes users to the section of the website with opinion news and articles.
- Subscribe to Newsweek- this part of the navigation enables user to subscribe to Newsweek so that they can have access or get news articles in their email.
- Change edition- this link enables the users to change the edition of the website they are using based on the location and the language.
- Sign in- this option is for users who want to sign in so that they can access their accounts.
- Search- The search link enables users to search for an article in the website.
Based on the following links in the navigation tab, one can get a conceptual view of the different categories that the website has. The navigation section does not change across all pages. It remains the same except for when the website is responding across different resolutions
This is the section that appears directly down below the navigation section. The contents section is the section with the content relevant to the specific section of the website. For example, considering the home page the content section contains the most trending story captioned with a large image and alongside there is a headlines column with the most recent headlines formatted as links. The links take the user to the specific article or story. Below the most trending story a list of the other stories appears. Each story is captioned with a smaller image and a heading which I a link to the whole story.
The articles are arranged in order and for different categories a user can choose to go to the next page to view the next articles for that section.
The footer section contains links relevant to Newsweek as a company. These links include; about us which takes the user to the page containing information about the website, contact us link which contains information about how to contact Newsweek, copyright link which contains copyright information and many more links. The links section has a magazine preview section previewing the most recent magazines published by Newsweek. The users can subscribe for a newsletter or share the website in various social media websites. The footer remains the same across all pages and does not change depending on the section of the website like the content section.
Evaluation Factors
The website is evaluated to find the failures and successes in the design of the website which determines the appearance and user interaction of the website. The findings will be used to do a recommendation on both the successes and failures of the website based on the design. The following factors can be considered as a basis on which the evaluation is done.
Navigation is one of the most crucial parts of any websites because without navigation, the users would not be able to navigate through the different pages that the website has. Navigation should be designed considering all types of devices with different screen sizes. A user using a device with a small resolution should have the same ease of navigating through a website just as that user with a larger resolution. The navigation should be designed to respond and adapt across various screen sizes (Casel, 2011).
Currently many devices re coming with touch capability. This mostly applies in medium sized display devices and small sized display devices for example smartphones. The touch capability has also extended to large sized display devices like desktops and notebooks which are coming with touch capability. Considering the current trend in technology a website should be designed considering touch capability for different devices. The appearance of the website should be based on how users hold the device and which thumb they use. The design should also consider how the users interact with the website on a specific device (BoudReaux, 2013). These should include features like pinch to zoom out or zoom in or swapping across the screen to navigate between tabs or to draw navigations.
The purpose of the website is an important factor to consider when coming up with a design. The purpose should help the designers on how to structure the website. For example, Newsweek should be designed with the fact in mind that it’s for readers looking for news articles which can be different from a website like YouTube which is for watching videos (Ruluks, 2014).
The colors used to design the layout of the website play a crucial role on the success or failure of a website (Meek, 2012). Colors should be used carefully while avoiding use of many colors for different sections of a webpage. Use of many colors has the effect of making a website look cluttered as it appears to have so many things in one page. Thus, the combination of colors used on a single page should be a crucial factor. Color selection extends to fonts. The font color selected should be visible over the background on which it is written.
Evaluation Across Different Display Devices
The typeface used should be easy to see and read for readers across all devices. Designers should use the correct size to ensure users get a rich user experience while using the website.
The time it takes to load different pages on the website is a very crucial factor. A properly designed should be designed to take the least time to load. This provides a seamless transition between pages as the user interacts with the website. Designers should not use so many high quality and sized images which affect the loaf time of the web pages as different users have different internet speeds (Profk, 2015).
Based on the stated factors, the website can be evaluated across different displays to see which factor the designers considered during the design and which factor they left out or did very little on. The displays on which the website will be evaluated are;
- Large display
- Medium display
- Tiny display
Large display devices have a screen resolution greater than 1280x 768 pixels. These devices are mostly desktops and notebooks with an exception of few medium devices with the capability of achieving higher resolutions to fit in this class.
To evaluate the website on large display devices, https://www.newsweek.com/ is opened using the following resolutions
- 1280 x 768 pixels
- 1920x 1080 pixels
1280 x 768 pixels
1920 x 1080 pixels
Based on the evaluation factors, the following analysis is done.
- Navigation- Based on the two resolutions considered navigation of the website has been designed properly as it at the top of the screen and has a fixed property so it does not move as the user is scrolling across a webpage.
- Ergonomics (designed for touch)- Using the website with two resolutions, the website is easy to use with touch. This is because every detail is clear as the screen size is large so every detail fits on the screen.
- Purpose- The purpose of Newsweek is to provide news articles to readers. The design used for large display devices achieve the purpose of the website as users are able to access the website, browse between different articles in any section and open that article to read it.
- Colors and typefaces-The colors and the typeface used blend perfectly for the design. W=black text on white background makes it easy for readers to see the text. However, the bright light can affect users who spend a lot of time reading articles
- Time, it takes to load pages-The time it takes to load different pages is a bit long. This can be attributed by number of articles in every page. Every article has an image captioned to it and this increases the number of images loaded on a single page.
Medium display devices have a resolution ranging between 480×640 pixels and 700×960 pixels. To evaluate medium displays, both portrait and landscape orientation as these devices can flip between the two orientations just by rotating the device. The following are the appearances of the website;
Considering the two resolutions in both portrait and landscape orientation the following findings are gotten using the evaluation factors
- Navigation- The navigation responds very right medium display and changes to a strip drawable by pressing the menu button. The navigation is very easy to use.
- Ergonomics (designed for touch)- Based on both orientations the website is easy to use for touch devices as all details fit perfectly.
- Purpose- The website achieves its purpose for medium displays as users can browse through articles and find something to read.
- Colors and typefaces-The colors and the typeface used blend perfectly for the design. White on black text on white background makes it easy for readers to see the text. However, the bright light can affect users who spend a lot of time reading articles
- Time, it takes to load pages-The time it takes to load different pages is a bit long. This can be attributed by number of articles in every page. Every article has an image captioned to it and this increases the number of images loaded on a single page.
Tiny display devices have a screen resolution ranging from 200×320 pixels and 400×640 pixels. These devices are usually small handheld mobile devices for example iPhone. To show the appearance and responsiveness of the website two resolutions are considered.
- 200×320 pixels- minimum resolution for tiny display devices.
- 400×640 pixels- maximum resolution for tiny display devices.
The two resolutions are evaluated in both landscape and portrait orientations as these devices have the ability to switch between the two orientations just by turning the device.
Based on the evaluation the findings can be analyzed against the evaluation factors.
- Navigation- The navigation responds very right tiny display and changes to a strip drawable by pressing the menu button. The navigation is very easy to use.
- Ergonomics (designed for touch)- Based on both orientations the website is easy to use for touch devices as all details fit perfectly for maximum resolution of tiny devices. This is not the case to minimum resolution because the content does not fit correctly in portrait orientation
- Purpose- The website achieves its purpose for medium displays as users can browse through articles and find something to read.
- Colors and typefaces-The colors and the typeface used blend perfectly for the design. White on black text on white background makes it easy for readers to see the text. However, the bright light can affect users who spend a lot of time reading articles
- Time, it takes to load pages-The time it takes to load different pages is a bit long. This can be attributed by number of articles in every page. Every article has an image captioned to it and this increases the number of images loaded on a single page.
To help evaluate the design and interactivity views from other users were evaluated. Two participants were considered as case studies.The first participant was my small brother age 16 years. The participant was asked to open the website with the device of their choice and they chose their mobile phone which is Google Nexus 5X. After viewing and interacting with the website for a while the participant was asked for his views on the design and interactivity of the website. The participant said the website was plain simple with no color thus had no life. He added to say that although it’s simple in a good way it had no life and could not be used for a long time by people of similar age. The following screenshot was taken from the device.
Views from Users
The second participant was my mother aged 47. The participant was asked to select a device of their choice to view the website. The participant chose a desktop computer to vie the website. The participant was asked to interact with the website for a while and then give her vies. The participant said she liked the feel of the website as it was plain simple and easy to use.
Using the findings from the analysis done on the evaluation it’s clear that the website has tried to integrate all concepts of a good design across many devices. This can be shown by the fact the website is able to adapt and respond according to any resolution. Usability level of the website across devices is at a high level and this is a plus for the website.
However, the website can still be improved to make it better. For the color the website can be designed giving users an option to choose what color they want for the background color. This could be helpful to users who spend a long time using the website or users reading the articles in a dark room. This change could classify the website into two modes.
- Light room mode- This mode is the current design.
- Dark room mode- This mode is the proposed mode for users using the website in a dark room. The diagram below shows the proposed design tweaked with chrome device simulator.
The website can also reduce the number of articles previewed in one page to reduce the load time take for a single page. This increases usability of the website as users don’t have to wait while navigating through different pages.
This evaluation has been made possible because of chrome device simulator. These tolls have various advantages and disadvantages.
These tools can be very helpful to developers during the design and testing stages of building the website. This is because the applications provide an easy way to test the appearance and interactivity of a website across various devices and screen sizes. This guarantees that the final release can be used across every device without bringing problems.
Although RWD tools can be helpful to developers, they can also be used by end users to loop holes in the design of the website thus exposing the website to interference by malicious users.
There are other tools like Chrome device simulator used for responsive web design. These tools are;
- Firefox emulator
- Screenfly by Quirktools
- Dimensions Toolkit
- StudioPress Mobile Responsive Design Testing
- Matt Kersley Responsive Design Testing
- isResponsive
- Responsinator
- ViewLikeUS
Conclusion
Based on the findings the website is responsive across various all displays giving a good user rating. However, a few things can be done to make the user experience even better. These findings have been identified due to the presence of responsive web design tools like chrome device simulator.
References
Anon, 2015. Designing for 10000 Screens: 4 Layout Tips for Responsive Web Design. venturepact. Available at: https://blog.venturepact.com/designing-for-10000-screens-4-layout-tips-for-responsive-web-design/ [Accessed May 13, 2017].
BoudReaux, R., 2013. What is the difference between responsive vs. adaptive web design? techrepublic. Available at: https://www.techrepublic.com/blog/ [Accessed May 13, 2017].
Casel, B., 2011. 10 Key Considerations for Your Mobile Web Design Strategy. Mashable. Available at: https://mashable.com/2011/03/24/mobile-web-design-tips/#EG5wGsVxkuq0 [Accessed May 13, 2017].
Meek, G., 2012. TOP TIPS FOR RESPONSIVE WEB DESIGN: A CASE STUDY. Stickyeyes. Available at: https://www.stickyeyes.com/2012/07/06/top-tips-for-responsive-web-design-a-case-study/ [Accessed May 13, 2017].
ProfK, 2015. Ask Design Blog. Ask Design Blog. Available at: https://www.askdesign.biz/blog/2015/01/8-awesome-responsive-web-design-emulators/ [Accessed May 13, 2017].
Ruluks, S., 2014. 9 basic principles of responsive web design. Froont Open Design Blog. Available at: https://blog.froont.com/9-basic-principles-of-responsive-web-design/ [Accessed May 13, 2017].
Order an Essay Now & Get These Features For Free:
Turnitin Report
Formatting
Title Page
Citation
Outline
