Responsive Web Design Assignment Help
The report is the part of course completion assessment, assigned in the course “Responsive Web design”.The purpose of the report is to evaluate a given website “makezine.com” for Responsive Website principals, and give improvement recommendation for the website based on these evaluations.Google Chrome Device emulator is used for testing the page for RWD principals.
Structure of the Report
The report starts with introduction to the website including its purpose and content.The second section first highlights the prominent feature of the webpage followed by the detailed illustration of RWD principles used in its design.The same section also highlights the positive and negative aspects of the RWD principles specific to this website. A detailed review on device emulator tools is given in section three.The last two sections gives recoomendation based on findings in second section and conclusion.
Introduction of the Webpage
Makezine.com is the website of American bi-monthly magazine named “make”.It is published by the”MakerMedia”.The magazine consists of different projects based on the concept of Do it yourself(DIY) or Do it with others (DIWT).It consists of different types of projects related to computers, electronic, robots, metalworking and woodworking.It main target are people who enjoy making innovative things normally invoving cheap material already available at home.Its first issue appeared in January 2005.It is available in print version as well as IPad and web version to its subscribers.The web page allows for searching its content and include blogs, forums and videos related to its target projects.Most of the projects are step by steps projects with meaningful images(Make: DIY Projects and Ideas for Makers, 2017).Subscribe user can login to view online magazine.The website main links consist of following items(Make: DIY Projects and Ideas for Makers, 2017):
1.List consists of Devboard sub-link which includesboard designing tricks and techniques for connecting devices to the Internet of Things, automating data collection for science experiments, and controlling robots and other similar things.The skill builder sub link gives new skills for welding and mold melting etc.
- Projects: Provides sublinks to projects ideas related to technology, digital fabrication, craft and designdrones and vehicles.
- Guides: Different guides for 3d printer guide,boards guide, and drones guide.
- Maker Faire:The magazine organizer also launches different yearly events for such projects.The section gives sublinks to related articles.
- Shop: Projects lovers can shop for various products like books and magazine.
Features of “makezine.com”
Following are some features pointed out as a good website features in (Spritzweb.com, 2017) are fulfilled by makzine.com mentioned below:
- Appearance: All the products and services provided by the magazine are covered in the website.An appropriate color scheme is used which donot allows users to distract from the relevant content.Text is easily readable.Most of the text is blackon a white background, and other color combinations are also within an appropriate range.Fonts used are easy to read and between 10 to 12 point size.
- Content:All the content is relevant and informative.For example description of different projects under projects menu is given shortly in a manner to attract the interested readers.
- Functionality: Every component of the site is working quickly and correctly.There are no broken or poorly constructed components. The hyperlinks, site searching, registration forms (sign up, login) are working as expected.
- Website Usability: There is minimum scrolling on the first page. Links are created from main page for detailed material related to that particular topic of interest.Menus are placed at the top of the site for desktop view and for mobile devices at the top of the site, or above the fold on either side. There are only six menus as limited number of menu is one of the good principal design.Long descriptive links are provided in project menu.This is positive point because long, descriptive link text is favored by Search Engines.
What is Responsive Web Development
Responsive Web Design is design technique or programming method through which website will work for different types of screens without any quality lose.There are three different types of devices that is desktop, mobiles and tablets provided by different manufacturers with varying screen resolutions(Firdaus, 2014).It is difficult to design separate page for every device.So the term Responsive Web Design was introduced in 2000 which eliminated the need for developing separate page for mobile devices. Responsive web design involve using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.
The responsive web property analysis of the webpage “makezine.com” was done using the Google Chrome Device Emulator.ForLarge Display Generic notebook or desktop screen resolution 1280×768 pixels was used, for medium Display Nexus Andriod 7 device with display approximately 480×640 pixels, in both landscape and portrait orientation was used, and for tiny display blackberry z10 device with display approximately 400×640 pixels, in both landscape and portrait orientation was used.Following is the analysis or evaluation of important RWD principles.Screenshots for all the listed devices are included.
Reponsive Web design Principles
- Flexible grid and media queries.
Fluid grid when implemented in website design automatically adjust according to the device screen size as shown in the following figure:
Figure 1: Fluid layout for various devices((Nikita, 2015)
However fluid layout suffers from many disadvantages.During design phase only one type of screen is considered and view on different devices is often unpredictable.For example on large screen resolutions the lines may appear long and unreadable and may consists of a lot of free space(Nikita, 2015).The website under consideration is not fluid layout.It is based on media queries which help adjust different sections and columns according to the screen size, as shown in the following figure:
Media queries are executed by CSS in form of filters.Media query changes the style according to the type ofdevice.It renders the content according to the display, width, height, type, resolution and orientation.The page is found to be using media query which is one of the essential design principles of Responsiv(Nikita, 2015)e Web page design.The webpage is not fluid grid but through use of media queries it easily adapts into various types of screen resolution, shown below in the screenshots.Media queries shows viewport size and preview styles for the targeted screen sizes.In the below screenshots colored horizontal lines means:
- Blue:Queries targeting maximum width.
- Green:Queries targeting width within range.
- Orange:Queries targeting a minimum width.
Responsive Web Design Assignment Help
There is a difference between text appearance and reading on the mobile and the desktop.Normally mobile device is hold closer to the face as the screen is smaller.Desktop screen is further away as compare to the mobile.Therefore, the same font-size on the desktop looks smaller due to the difference in thedistance.Type design principles for responsive pages are to choose fewer fonts and sizes,choose available fonts.Purpose is to design for legibility as text sizesare very important for mobile devices(Nikita, 2015).The review of the website in emulator showed that while design phase all principal of typography are followed.Limited number of font sizes are utilized and the type of font appears to be one of the commonly used fonts.Different color combination has been used for main headings.In the example screenshot typefaced use is easy to read for all types of devices.Different type of typeface and color is used for main name of the brands visible in the screenshots for all devices.The main articles headings are bold and underneath text is unbold means typeface variation by size, text and color is done.
Browser version often produce variations in the weight, spacing, and rendering of the font families to different viewer/users.Following screen shots shows how text appears in internet explorer and Google chrome.
- Flexible media
Without the use of media like images and videos no webpage and its related information can be complete.As the download of videos and images take time, they must be scaled and compressed without the quality loss(Nikita, 2015).
Flexible images are one of the most important features of responsive webpages.Flexible images means the ability or property of the image to change their size depending on the resolution of the screen or the browser window.In the design of the pages which were not responsive the width and height ofimages is set by the use of pixels(Nikita, 2015).For responsive flexible image are implemented using withpercentages.For the porpose of looseless data compression PNG format is used.JPEG has good features compatablein the context of large images andPhotographs.Therefore, these formats are used for responsive web design.
The current website has used all flexible media principles while designing phase.The view of all images is adjusted to the required screen resolution according to the device.The quality of the image remains same for all the devices and resolutions as clear from the given screenshots.
Mobile navigation is a very delicate point in responsive web design. It should not be as on the normal screen(Firdaus, 2014).Following are main criteria for Navigation should be simple and clean in order not to make a user confused.
- To avoid confusion and promote user friendliness, the navigation of the website must be simple.
- The order of the navigation should be not be same, but all the navigation objects should have the same order.
- Drop down list or toggle button should be used for nested menu items.
The second and third point are cleared from screenshots that drop down list are used and navigation objects are the same as shown in the figures in form of blue rectangles:
- Positive aspects of the Website
The analysis showed that the given website is responsive.There are many positive aspects of responsive pages as wellas this particular webpage .The main advantage of responsive website is that only one page is designed so all the screen sizes.Therefore similar page is viewed on the mobile and the desktop.Prior to RWD separate pages were designed for mobile and desktop which often consisted of different content(WSI Online, 2017).The responsive design is userfriendly for :makezine.com” particularly because if a user finds a good project idea on his mobile, he needs not to switch on his desktop for additional detail as same view is provided for mobile and desktop.Google also recommends responsive pages because responsive pages have same URL and Html, it is easy to crawl, index and organize text.Separate websites for mobile and desktop requires separate SEO management(WSI Online, 2017), which results in tracking statistics difficult.If same URL and webpage exist for all the devices, SEO management is easy for the webpage(WSI Online, 2017).
Negative aspects of the website
Responsive websites take longer to load on tablets and mobiles.This is due to scaling down of images and content and not resized for faster downloading(WSI Online, 2017).This is one of the disadvantage of responsive webpages.Similar case was observed in this evaluation.The time was longer for tiny display screen resolution.Due to media queries the contents in the tiny display mobiles is stacked vertically down in order to accommodate screen space, important feature can be overlooked by the users due to long scrolling(WSI Online, 2017).For this website tiny display mode the scrolling is very lengthly due to same reason.
For mobile devices, the content which is not very important is removed or hidden for better view of the page. Progressive disclosure technique is used by the given website to show users only a few of the most important material.These principles also apply for mobile first rule.According to this principle the website is designed according to mobile screen resolution which automatically keeps important content to the view of the users and hides other contents.No such method is appied and the content in all the views are same as for large display.This technique boost for search engine optimization.
Review from other persons
XYZ is the 24 years old and student of Master of Business Management.He is frequent user of tablet and owns iphonesmartphone.He was requested to review the website using Google Chrome Emulator.He complained of slow page loading in medium and tiny sized screen resolution.However, according to him quality of video and images were same for all the screen resolutions.Regarding typography he was unable to clearly state the difference.
ABC is the final year student of Computer Science and has understanding of Responsive web page.According to him, the loading time of page is negligible as he didn’t notice much delay.The typography seems weak in larger display when the page was viewed in Emulator.He was also not satisfied with font size used for different articles.The font for headings and normal text seemed to be same.