ASSIGNMENT 6: COMPLETE DRAFTDue in Week 8 and worth 50 points Based on the feedback from your earlier drafts, make any changes necessary. You will continue to work on your site adding the following elements: Use CSS to position content on at least two pagesAdd a special effect using CSS on the HomepageUse CSS to “brand” your formNow that you have begun to write your pages in HTML, please add the following to a comment in theof your work:Name, date, week #, class with section, and campus # (i.e. CIS273001VA016) Always zip your work into a single folder for uploading to Blackboard. You’ll want to keep each week separate so that you can review earlier iterations of your site, in case you want to revert something back based on feedback from your professor.Only feedback I received from my professor from prior work is outstanding job. So, no added work needs done except for what is listed above. Attached are the last three Assignments turned in to work off of. The following are:Assignment 3Assignment 4Assignment 5
Unformatted Attachment Preview
ASSIGNMENT 5: NECESSARY MOBILE VERSION CHANGES
Jeffrey A. Rapadas
Professor Ali Rahat-Zafar
CIS 273: Web Design and Development
May 17, 2019
Mobile Version of the Web vs the Standard Version Developed
For the mobile version, the designed is specifically targeted for a smartphone’s screen. It
will specifically fit a mobile browser, therefore, there is no kind of a screen stretch experience
characterized by the standard website. The pages that are of utmost importance are chosen for
display instead of having all the web pages added as for the case of a desktop/standard site, thus
a subset of the contents available on a desktop/standard design. Furthermore, the mobile version
used separate domain names and are differently hosted on a website domain, for example,
m.site.com (Manz, 2019; Budiu, 2019). For the standard version, all the information is displayed
on a device with a large screen, like the PC’s screen width, among other notable traits contrary to
the mobile version, experiences when accessing the website using a desktop browser.
Changes to make the current site usable on a mobile website
The best approach here is to design and develop the standard site to be a fully “responsive
website”. With the responsive approach, its development techniques are designed in such a
manner that it detects the type of the client’s device involved, and then dynamically adjust a
site’s layout based on the size of the screen used to display. Therefore, the same content may be
displayed in a one-column format on a smartphone, a two-column format on a tablet, and a threecolumn format on a desktop (Budiu, 2019). The features of the standard website will, therefore,
be rearranged to suit a mobile-responsive version.
These are the common basics to facilitate the development of the mobile-friendly version
from the standard desktop one. (“Why Have A Mobile Version Of Your Website?”, 2019)
Using a fluid layout that will enable the website to necessarily expand and fit the
screen resolutions of the mobile devices or smartphones used.
Application of large font sizes that will be easily readable on small mobile device’s
Instead of text links, we can apply the use of graphic buttons since they can be easily
touched on the navigation
Adopt simple navigation with options that are fewer
Prefer to use CSS intensively to replace image files. Examples of the CSS here are
gradient fills, rounded boxes, etc. the data for the CSS is relatively smaller as
compared to the image file sizes, therefore, the website’s load time can be slowed
Turn-off autocorrection for forms for better convenience during user interaction.
One of the common methods of getting a mobile-responsive design is by overcoming the
mobile device’s default viewport. Here, we are trying to overcome the website’s screen width
display by scaling the traditional website design’s factor for computer monitors to fit the modern
smartphone/mobile devices, probably by adapting to the computer-sized website (Heng, 2019).
Usually, the default screen width for computer monitors during design is 980 pixels. So, from
this width, the mobile devices will be having their browsers pretending to be displaying website
contents using this width during the scaling. To create a comfortable user experience for the
mobile users while scaling the contents, the default 980 pixels have to be overwritten. (Heng,
2019). We can do this on the section of the HTML by adding the following tag: .
From the tag above, the viewport meta tag will be instructing the mobile browser to use
the mobile device’s actual width, with a scaling factor of 1. This will enable the browser to fit the
contents into the existing window (Heng, 2019). Now, we can add the CSS code equivalent to
this to the style sheet. For example:
Budiu, R. (2019). Mobile Websites: Mobile-Dedicated, Responsive, Adaptive, or Desktop Site?.
Retrieved from https://www.nngroup.com/articles/mobile-vs-responsive/
Heng, C. (2019). How to Make a Mobile-Friendly Website: Responsive Design in CSS
(thesitewizard.com). Retrieved from https://www.thesitewizard.com/css/mobile-friendlyresponsive-design.shtml
Manz, J. (2019). Mobile Sites, Mobile Apps & Responsive Websites: Answered. Retrieved from
Why Have A Mobile Version Of Your Website?. (2019). Retrieved from
Our essay writing service fulfills every request with the highest level of urgency.