Responsive Web Design and MobiReady: Enhancing User Experience

The assignment content discusses the importance of understanding the response and behavior of an application in different modes, especially for professional testers and developers. It highlights the features of MobiReady, a tool that allows users to test website functionality, flexibility, and layout structure without requiring specific devices. The advantages of using MobiReady include its free availability, customization options, and system documentation. However, it also has some disadvantages, such as limitations in testing certain functions or network-related processes.

qwertyuiopasdfghjklzxcvbnmqw
ertyuiopasdfghjklzxcvbnmqwert
yuiopasdfghjklzxcvbnmqwertyui
opasdfghjklzxcvbnmqwertyuiopa
sdfghjklzxcvbnmqwertyuiopasdf
ghjklzxcvbnmqwertyuiopasdfghj
klzxcvbnmqwertyuiopasdfghjklz
xcvbnmqwertyuiopasdfghjklzxcv
bnmqwertyuiopasdfghjklzxcvbn
mqwertyuiopasdfghjklzxcvbnmq
wertyuiopasdfghjklzxcvbnmqwer
tyuiopasdfghjklzxcvbnmqwertyui
opasdfghjklzxcvbnmqwertyuiopa
sdfghjklzxcvbnmqwertyuiopasdf
ghjklzxcvbnmqwertyuiopasdfghj
klzxcvbnmqwertyuiopasdfghjklz
xcvbnmrtyuiopasdfghjklzxcvbnm
Makezine
Website Evaluation
9/13/2017

Makezine – Website Evaluation
Table of Contents
Introduction...........................................................................................................................3
Major Features.......................................................................................................................3
Positive and Negative Website Aspects...........................................................................................3
Large Display..................................................................................................................................3
Medium Display Portrait................................................................................................................6
Medium Display Landscape............................................................................................................7
Tiny Display portrait......................................................................................................................8
Tiny Display Landscape..................................................................................................................8
Website Review – Other Users...............................................................................................9
User 1: Sam|32|Friend|Male............................................................................................................9
User 2: Sia|40|Aunt|Female.............................................................................................................9
Recommendations................................................................................................................10
Chrome Device Simulator....................................................................................................10
Advantages:...................................................................................................................................10
Disadvantages...............................................................................................................................11
Example of another Tool - MobiReady................................................................................11
Features of MobiReady.................................................................................................................12
Screen Resolution can be Adjusted................................................................................................12
Flexible Images..............................................................................................................................12
Layout Structure – Custom...........................................................................................................12
Advantages of MobiReady............................................................................................................12
Disadvantages of MobiReady........................................................................................................13
Conclusion............................................................................................................................13
References.............................................................................................................................14
2

Makezine – Website Evaluation
Introduction
Makezine is a website that encourages the makers by publishing their projects and works on the
website and also promotes the same. The journey of the organization began with the publishing
of the Make magazine for the makers in the year 2005. The organization then decided to go
online with the aid of the website to reach out to more number of makers and the users. The
details of the makers, the technologies used by them and the projects developed by them are
available on the site (Makezine, 2017).
Major Features
 The sign in and sign up features are available on the site to allow the users to get
associated with the website.
 The website provides the information on the latest projects and technologies under the
“Latest” menu option.
 The information on the projects is also given under the “Projects” option in the menu.
 The makers can also go through the guides to enhance their work and projects. The
guides such as 3D printer guide, drones guide etc. are available on the site.
 The information regarding the upcoming maker fairs can be viewed from the site.
 The users can also shop for the books, magazines, kits and 3D printing equipment from
the site.
 The users may also choose to get involved with the site by creating a portfolio or writing
newsletters for the company.
 The details regarding the company, contact details, help and careers etc. is also available
on the site.
 The users can also explore the making by accessing the options such as maker fair, maker
camp, maker share etc.
 The users can purchase the tickets to the upcoming events and programmes using the web
site.
3

Makezine – Website Evaluation
Positive and Negative Website Aspects
Large Display
Makezine website is evaluated using different resolutions and the first out of all is the large
display which is the desktop resolution with settings as 2560 x 1400. The aspect ratio in this case
has been set up to 16:9. In this display, there are a lot of whitespaces that can be observed in the
left and the right panels.
Home Page of the website
The same issues of whitespaces can be seen in the rest of the pages as well.
4

Makezine – Website Evaluation
Whitespaces on the intermediary pages
As per the principles of the responsive web design, it is necessary for the websites to act and
respond as per the user action. However, the elements on this site do not behave accordingly.
Consistency is one of the most important design principles that are required to be maintained in
all of the web pages. However, the violation of the same can be witnessed in this case as the
layout of the Sign In page is different from that of the home page and other intermediary pages.
Sign In Page
5

Makezine – Website Evaluation
The users can easily navigate through the several options that are available on the site and the
flow of navigation that is followed in the website is also self-explanatory in nature.
Medium Display Portrait
The next display option that has been used for the evaluation of the website is the medium
display. The resolution that has been selected for this display is 414 x 736 and it is the resolution
that is used in the iPhone as well. The issues that were observed in the large display in terms of
excessive whitespaces are not witnessed in this mode (Shersonmedia, 2016).
The elements have been placed correctly with good use of space on the screen. However, the
issue of consistency can be seen in this display as well. There are screens on which the footer
section has been removed and the layout has also been changed.
6

Makezine – Website Evaluation
Footer Section Missing on Subscribe Page
Medium Display Landscape
The third display option that has been selected to evaluate the website is the medium display in
the landscape mode. The positive and negative aspects that are present in this orientation have a
lot of similarity with the portrait mode in the medium display.
There are however, certain differences as well. For instance, there are whitespaces that are seen
in the menu which could have been avoided by changing the size of the panel.
7

Makezine – Website Evaluation
Whitespaces Present in the Panel
The navigation and the flow between the pages are good. The issue of consistency in terms of the
layout is also present in this mode as well.
Tiny Display portrait
The fourth mode that has been used for the website evaluation is the tiny display with the
orientation as the portrait mode. The resolution has been set to 360 x 640 in this case. The
presence of whitespaces along with the problem of consistency is present in this mode as well. It
is exactly similar to the portrait mode in the medium display and the positive and negative
aspects are also the same.
Tiny Display Landscape
The fifth mode that has been used for the website evaluation is the tiny display with the
orientation as the landscape mode. The resolution has been set to 640 x 360 in this case. The
presence of whitespaces along with the problem of consistency is present in this mode as well. It
is exactly similar to the landscape mode in the medium display and the positive and negative
aspects are also the same.
8

Makezine – Website Evaluation
Website Review – Other Users
User 1: Sam|32|Friend|Male
Sam is a fashion designer and has a low expertise in the technical domains and areas. However,
he is a keen user of the web and accesses the same for personal and professional purposes.
Sam went through the website and the first thing he pointed out was the complex signing up
process that is present on the site. He was not very comfortable with the information that was
being asked and thought that the form was also a bit too long. He was impressed with the home
page of the site and could understand the purpose of the website along with the several options
and services that it offered.
Sam made use of the site using Google Chrome as the web browser and used his laptop to review
the site. He also liked the color scheme and was looking for the personalization settings in terms
of the theme. He was disappointed by not finding such settings. The overall experience of Sam
was good with the site with certain drawbacks as highlighted above.
User 2: Sia|40|Aunt|Female
Sia is a doctor and doesn’t usually get the time to explore the web. However, she makes use of
the same to stay in touch with the friends and family and read about the latest developments in
the field of medicine.
Sia was impressed with the color tone of the site and was looking for the About Us section in the
header of the site. She accessed the site using Google Chrome as the browser and made use of
her desktop for the same. She felt that there were too many elements that were present on the
home page which left her confused.
She appreciated the flow of sections and the search functionality that was implemented on the
site.
Both the users liked the use of colors on the site. Sam was concerned about the Sign In page and
customization settings whereas Sia wanted lesser elements to be present on the main page of the
site.
9

Makezine – Website Evaluation
Recommendations
 There are a lot of whitespaces that are present on the site in the large, medium as well as
tiny display. The placement of the UI elements shall be adjusted as per the display and
mode that is selected by the user.
 There are consistency issues that have been observed in terms of the layout of the
website. The header and footer sections shall not be changed from one page to the other.
 The information regarding the website and the organization shall be included in the
header section as well to provide the users with the details on the area of work (Beverly,
2016).
 The Sign In section that has been implemented in the website could also have been
improved by allowing the users to sign in to the site using their social media accounts
(Cavoukian, 2016).
 The customization and personalization settings shall be provided in order to modify the
colors or the themes that are used on the site.
Chrome Device Simulator
The application that used for the review and evaluation of the website is Chrome Device
Simulator. These are the applications that have been developed so that the users can experience
the environment for any of the device of their choice by changing the settings. They may choose
to view the site or the application on a large display such as a desktop or may also set the
parameters as medium display as that of Smartphones. A real-time view of the application is
made available by these applications (Microsoft, 2016). The simulator that has been developed
by Google is termed as Chrome Device Simulator.
Advantages:
 The users can set the screen resolution as per their choice which may provide
them with the experience of the website response in any of the modes (Google,
2016).
 The styling and the CSS queries implemented on the site can also be analyzed and
reviewed with the aid of the tool.
10

Makezine – Website Evaluation
 The users may continue to use the other web applications in other tabs of the
browser.
 There is no additional cost that is associated with the usage of the tool and it can
be viewed in the settings of the browser itself (Hpe, 2012).
 There are no issues with the availability of the device or any of the technical
faults or failures (Guru99, 2016).
 There are users that may make use of the tool at the professional level. For
instance, the testers may make use of this tool to capture the behavior of the web
application in different scenarios. The screenshots can be easily captured and
saved (Guru99.com, 2016).
Disadvantages
 The tool tries to provide with the settings and options as the real-world usage of
the device. However, there are still difference between the virtual experience and
the real usage.
 In the actual device, there are other applications and components involved which
may have an impact on the functioning of the application which cannot be judged
with the tool.
 The testers cannot test the behavior of the application with the execution of the
external events, such as, incoming calls, network lags etc.
Example of another Tool - MobiReady
There are various other tools that have been developed apart from Chrome Device Simulator.
MobiReady is an example of such tool which has been designed so that the users may gain
experience of the virtual world by performing certain settings to reach to the desired
environment. The settings allow the users to view a web application in the real-time
(MakeUseOf, 2010).
11

Makezine – Website Evaluation
Features of MobiReady
Screen Resolution can be Adjusted
The users get the ability to adjust the screen resolution and the orientation as per their preference
and choice. These settings allow the users to understand the response and behavior of an
application in different modes. The functionality is of great aid for the professional testers and
developers. With the aid of this feature, the testers can test the functionality and behavior of the
site virtually without requiring specific devices to perform their activities (Knight, 2011).
Flexible Images
The images that are included on the web pages and web applications can also be tested in terms
of the flexibility of the images. This allows the testing of the images that are placed on the screen
along with their scalability as well (Mobiready, 2017). The option is used by the testers and
developers as well for understanding the behavior of the images and their placement on the
screen.
Layout Structure – Custom
The users can also test the layout structure of the website and can also test the custom layouts as
well. It is extremely necessary to maintain the layout in the website in terms of the consistency of
the same along with the visual appeal.
Advantages of MobiReady
 The tool is made available to the users for free of cost. There is no additional cost that
comes along with the usage of the features of the tool.
 The tool can be used by the users by downloading its latest version from the Internet.
 There are several visualization options that have been integrated in the tool.
 The users can view the web applications in the environment of other real-time
applications and displays. This allows them to make use of the tool to enter in the device
environment of their choice.
 User experience is enhanced with the aid of the customization options that are available
in the tool.
 System documentation is present in the tool which makes it easy to understand the
features and functionalities.
12

Makezine – Website Evaluation
Disadvantages of MobiReady
 There are several functions that are executed on the real devices which cannot be carried
out on these tools. For instance, the testing of the incoming calls and their impact on the
behavior of the application cannot be tested. Similarly, there are various network related
testing processes which cannot be carried out by using the tool.
 The tool tries to provide with the settings and options as the real-world usage of the
device. However, there are still difference between the virtual experience and the real
usage.
Conclusion
Websites are being set up for every business and organization that has been set up. There are
several business units that completely rely on the e-commerce mediums to carry out their
businesses. It is, therefore, necessary to make sure that the websites and the web applications that
are designed for the businesses are advanced in terms of the technology and the design that is
used. The users that access the website will only get connected with the same if they succeed in
understanding the features of the site and receive a good user experience as well. Responsive
web design is one of the mechanisms that may be used to make sure that the visual appeal,
usability and performance of the site is not compromised on any of the pages or the screens.
With the aid of this design and the principles that come under this design, there are settings that
are done so that the website responds as per the user action.
There are certain design principles that the websites must include such as consistency, error
resolution, easy flow and navigation, good use of space along with correct placement of sections.
There are many of the non-functional requirements in terms of the system qualities that are
required to be included in the websites in terms of the usability of the site, performance of the
site, reliability and availability along with the scalability and maintenance of the site. The
website designers and developers must ensure that the sites that are released for the end-users
comprise of the functional as well as the non-functional elements so as to gain maximum user
satisfaction.
13

Makezine – Website Evaluation
References
Beverly, B. (2016). Applying Tufte’s Principles of Information Design to Creating Effective
Web Sites. Retrieved 13 September 2017, from
http://www.cc.gatech.edu/projects/PageSleuth/references/p309-zimmermann.
Cavoukian, A. (2016). User Interfaces. Retrieved 13 September 2017, from
https://www.ipc.on.ca/images/Resources/pbd-user-interfaces_Yahoo.pdf
Google. (2016). Simulate Mobile Devices with Device Mode  | Web  | Google
Developers. Google Developers. Retrieved 13 September 2017, from
https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en
Guru99. (2016). Real Device Vs Emulator Testing: Ultimate Showdown. Guru99.com. Retrieved
13 September 2017, from http://www.guru99.com/real-device-vs-emulator-testing-ultimate-
showdown.html
Hpe. (2012). Emulators vs. Real Devices for Mobile Application Testing - The Answer Might
Surprise You. Hewlett Packard Enterprise Community. Retrieved 13 September 2017, from
http://community.hpe.com/t5/All-About-the-Apps/Emulators-vs-Real-Devices-for-Mobile-
Application-Testing-The/ba-p/5506993#.Vy9qBDB97IV
Knight, K. (2011). Responsive Web Design: What It Is And How To Use It - SmashingMag.
Smashing Magazine. Retrieved 13 September 2017, from
https://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/
MakeUseOf. (2010). MobiReady: Test How Mobile Friendly Your Website Is. MakeUseOf.
Retrieved 13 September 2017, from http://www.makeuseof.com/tag/mobiready-mobile-
friendly-websites/
Makezine. (2017). Home | Make: DIY Projects and Ideas for Makers. Make: DIY Projects and
Ideas for Makers. Retrieved 13 September 2017, from https://makezine.com/
Microsoft. (2016). Simulate Popular Mobile Devices for Testing. Asp.net. Retrieved 13
September 2017, from http://www.asp.net/mobile/device-simulators
Mobiready. (2017). mobiReady. Ready.mobi. Retrieved 13 September 2017, from
http://ready.mobi/
14

Makezine – Website Evaluation
Shersonmedia. (2017). Web Design Talkfest. Shersonmedia.com. Retrieved 13 September 2017,
from http://www.shersonmedia.com/grant/cv/items/presentations/WebDesignTalkfest.pdf.
15