Transcription
International Journal of Scientific & Engineering Research, Volume 6, Issue 6, June-2015ISSN 2229-55181214An Enhanced Approach to Responsive WebDesign in Fluid Grid ConceptAbdulrehman Mohamed1, Dr. Cheruiyot W.K. PhD2, & Dr. Richard Rimiru, PhD3.Jomo Kenyatta University of Agriculture and Technology, Institute of Computer Science and Information Technology,P. O. Box 62000, Nairobi, Kenya.123almutwafy@gmail.com, wilchery68@gmail.com, and rimirurm@yahoo.comAbstract -Web design is a dynamic field which evolved around user viewing experience trends. The recent trends have revolutionized theweb design approach technologies. The result of which, Responsive Web Design (RWD) concept was coined by Web Designer EthanMarcotte in the year 2010. RWD is an approach of new paradigms and techniques to develop one single website which looks different fordifferent screen sizes so that it is usable on any access web device. The core concepts of RWD are; media query concept, fluid gridconcept, and fluid image concept. The study is inspired by the fluid grid concept. Lots of ink has been spilled on the concept, especially inareas of conversion of website’s fixed grid layouts to fluid grid layouts. However, these approaches involved heavy customization, resultinginto slow adaption by web designers. Therefore, the study’s objective is to address this gap by implementing an alternative approach thatwill be non-customizable and accessible by a single line of code. Hence, study presented an enhanced approach to RWD by implementingan algorithm coined Liquidizer.js in a jQuery Framework. The study employed Matt Kersley RWD Tool: for testing Liquidizer.js, BersoftImage Measurement (BIM) tool: for validating Liquidizer.js, and USE questionnaire for measuring usability: for evaluation of the Liquidizer.jsalgorithm in SPSS. The outcome of the study is threefold; to present the state-of-art survey of RWD technology, implement an algorithmLiquidizer.js that achieves an enhanced RWD, and register the Liquidizer.js in the jQuery Library under the GNU General Public License.Index Terms – Responsive Web Design (RWD), jQuery, Fluid grid concept, Liquidizer.js and cascading style sheets (CSS)IJSER—————————— ——————————itself to the users various devices (smart phones, laptops,1 INTRODUCTIONdesktop e.tc.). Hence, the idea of Responsive Web Designwas coined1.1 Background StudyAccording to [18], Responsive web design is theterminology given to the concept of designing andIn the more recent times the emerging technologies ofdeveloping a website so that the layout changes dependingcomputer science have spear headed the change of scienceon the device/viewport on which the website is beingfiction into science fact. Just a few years ago, technologiesviewed. By device, this could be a mobile phone, tablet,such as Internet of Things (IoT), cloud computing, foglaptop, desktop computer, or even a smart TV.computing, and just to mention a few, were science fictionAccording to [5], Responsive Web design is anand today are science facts. Most disciplines of sciencesapproach that suggests that, design and developmenthave reached their peak and are not experiencing anyshould respond to the user’s behavior and environmentsignificant growth, but computer technology is a dynamicbased on screen size, platform and orientation. The practicescience that changes by the second. Computer technology isconsists of a mix of flexible grids and layouts, flexiblea science that had shape our past, shaping our present andimages and an intelligent use of CSS media queries. As thewould shape our future. Therefore, this study is intrigueduser switches from their laptop to iPad, the website shouldby the computer technology dynamism, specifically in theautomatically switch to accommodate for resolution, imagearea of Responsive Web Design (RWD) technology.size and scripting abilities. In other words, the websiteIt is asserted by [14] that, RWD is a webshould have the technology to automatically respond to thedesign approach aimed at crafting sites to provide anuser’s preferences. This would eliminate the need for aoptimal viewing experience; easy reading and navigationdifferent design and development phase for each newwith a minimum of resizing, panning, and scrolling; acrossgadget on the market.a wide range of devices (from mobile phones to desktopIt is stated by [11] that; Responsive design is not acomputer monitors). A site designed with RWD adapts thesingle technology but a set of techniques that allow weblayout to the viewing environment by using fluid,pages to serve the needs of both mobile and desktop users.proportion-based grids, flexible images, and CSS mediaThe core components are: CSS @media queries, Fluidqueries, an extension of the @media rule.images and video, JavaScript, often triggered by windowResponsive Web Design was founded by Ethanmatch Media, Server-side solutions, and Scalable VectorMarcotte who is a developer and a web designer. He had aGraphic (SVG) to create resolution-free images.particular interest in architecture and he wanted to applyIt is suggested by [3] that, the following four corearchitectural principals in web design. Inspired byconcepts to be apply for RWD implementation: firstly, thearchitecture way of thinking, he applied the architecturalfluid grid concept – which calls for page element sizing toprincipal to web design; whereby a web site would adaptbe in relative units like percentages, rather than absoluteIJSER 2015http://www.ijser.org
International Journal of Scientific & Engineering Research, Volume 6, Issue 6, June-2015ISSN 2229-5518units like pixels or points. Secondly, the flexible images –which calls also for sized in relative units, so as to preventthem from displaying outside their containing element.Thirdly, the media queries – which allows the page to usedifferent CSS style rules based on characteristics of thedevice the site is being displayed on, most commonly thewidth of the browser. Fourthly, the RESS (Responsive WebDesign Server Side Components) – which in conjunctionwith client-side ones such as media queries can producefaster-loading sites for access over cellular networks andalso deliver richer functionality/usability avoiding some ofthe pitfalls of device-side-only solutions.It is further elaborated by [3] that, another name usedto describe this set of techniques is Adaptive Web Design(AWD). The name would match more since the websitereally adapts to the device, rather than respondingcontinuously to changes in its environment.1.2 Types of Web Layouts ApproachesAccording to [19], classifies the web layouts as fixedwidth layouts, liquid layouts, and elastic layouts.1.2.1 Fixed-Width LayoutsIt is described by [19] that, in fixed-width layouts, thewidth of the site is bound to a certain number of pixels.Generally, the measure chosen is 960 pixels. This is becausewith the passing of time, developers have found 960 pixelsto be the best size for grid layouts, because the number iseasily divisible by 3, 4, 5, 6, 8, 10, 12, and 15. However, thefixed-width layouts have some disadvantages. Thedesigners who want to create a fixed-width website have tokeep in mind that every aspect of their work has to beusable and clearly visible to a large number of screens,browsers, and devices. The wide variety of devices on themarket at this time, as well as the consequently greatvariability of screen sizes makes creating one-size-fits-allcontent quite a challenging task, and arguably a challengethat outweighs the precision and control of fixed-widthdesign.12151.2.3 Elastic LayoutsIt is elaborated by [19] that, elastic layouts aresomewhat similar to liquid layouts. The main difference isonce again the unit of measurement for size. The sizeindicator for elastic layouts is neither in pixels norpercentages; it’s measured in ems. An em is the equivalentof the size (in pixels) defined in the font-size CSS rule. Forexample, if one styles text with a font-size of 20 pixels, 1 emwould be equal to 20 pixels, 2 ems would correspond to 40,and so on. This types of layout gives the developer strongtypographic control. Since the vast majority of layouts arepredominantly populated with text, the precision of typetreatments makes elastic layouts a strong contender formany projects. However, even with this type of solution,there is a risk of an unpleasant and unaesthetic horizontalscroll bar in some rare cases. The study is motivated toexplore the fluid grid concept.There exist various web development languages forimplementation of responsive web design concepts. It is ofparamount importance to discuss the strength andweakness of these languages, in order to present the mostsuitable one for Liquidizer.js implementation.IJSER1.2.2 Liquid LayoutsIt is explained by [19] that, the first basic differencebetween the fixed-width type of layout and liquid layoutsis the measurements of their size. The fixed-width layoutsare measured in pixels, but liquid or fluid layouts,dimensions are defined in percentages, and as expected,this affords greater malleability and fluidity. In otherwords, by setting a percentage, one won’t have to thinkabout device size or screen width, and consequently, onecan find a reasonable solution for each case because thedesign’s size will adapt to the size of the device used.Liquid layouts are closely linked to media queries andspecial styles for optimization. Percentage-based widthsalone will likely not be enough to accommodate one’sdesign for a large variety of display sizes.1.3 Web Development TechnologiesAccording to [21], classifies the most common usedtechnologies for web design are jQuery, Ajax, CSS andHTML.1.3.1 jQueryAccording to [7], jQuery is a fast, small, and featurerich JavaScript library. It makes things like HTMLdocument traversal and manipulation, event handling,animation, and Ajax much simpler with an easy-to-use APIthat works across a multitude of browsers. With acombination of versatility and extensibility, jQuery haschanged the way that millions of people write JavaScript.It is described by [16] that, jQuery is very compact andwell written JavaScript code that increases the productivityof the developer by enabling them to achieve critical UIfunctionality by writing very small amount of code. It is alightweight cross-browser JavaScript library.jQueryemphasizes interaction between JavaScript and HTML. It isused by 27% of the 10,000 most visited websites, jQuery isthe most popular JavaScript library currently in use.1.3.2 Ajax (Asynchronous JavaScript and XML)According to [17], Ajax (Asynchronous JavaScript andXML) is a method of building interactive applications forthe Web that process user requests immediately. Ajaxcombines several programming tools including JavaScript,dynamic HTML (DHTML), Extensible Markup Language(XML), cascading style sheets (CSS), the Document ObjectModel(DOM),andthe Microsoft object,XMLHttpRequest. Ajax allows content on Web pages toupdate immediately when a user performs an action, unlikean HTTPrequest, during which users must wait for a wholenew page to load.IJSER 2015http://www.ijser.org
International Journal of Scientific & Engineering Research, Volume 6, Issue 6, June-2015ISSN 2229-5518It urged by [4] that, Ajax is not a programminglanguage or a tool, but a concept. Ajax is a client-sidescript that communicates to and from a server/databasewithout the need for a postback or a complete page refresh.Hence can be defined as; the method of exchanging datawith a server, and updating parts of a web page - withoutreloading the entire page. Ajax itself is mostly a genericterm for various JavaScript techniques used to connect to aweb server dynamically without necessarily loadingmultiple pages. In a more narrowly-defined sense, it refersto the use of XmlHttpRequest objects to interact with a webserver dynamically via JavaScript.1.3.3 Cascading Style Sheets (CSS)It described by [8] that, CSS is the language fordescribing the presentation of Web pages, including colors,layout, and fonts. It allows one to adapt the presentation todifferent types of devices, such as large screens, smallscreens, or printers. CSS is independent of HTML and canbe used with any XML-based markup language. Theseparation of HTML from CSS makes it easier to maintainsites, share style sheets across pages, and tailor pages todifferent environments.1216in windows, and implements browser features such asfollowing links that the user clicks on, managing a backforward list, and managing a history of recently visitedpages1.4 Objective of the studyAccording to [10], it is asserted that web designers maynot use fluid page designs for various reasons and furtherelaborated that, one of the reasons as being that: images,video, and other types of content with set widths, need tobe set at multiple widths to accommodate different screenresolutions. The available framework solutions involveheavy customization, which discourage web designers touse RWD techniques. This has resulted into low adaption ofthe concept by web designers.Hence, the study was inspired to address this gap bypresenting an alternative enhanced approach to RWD byenhancing the existing algorithm BlocksIt.js to anautomated algorithm coined Liquidizer.js that will beresponsive and accessed by a single line of code to improvethe adaptation of the technique by web designers. As aresult of this, the study was directed and guided by thefollowing specific objectives during the period of the study;1) To conduct a literature study survey of the existingstate-of-art RWD technologies.2) To design an algorithm Liquidizer.js that achievesan enhanced RWD.3) To develop and implement the algorithmLiquidizer.js that achieves an enhanced RWD.4) To conduct experiments for testing, validating, andevaluating the Liquidizer.js algorithm.5) To register the liquidizer.js algorithm in theexisting jQuery library platforms.IJSER1.3.4 Hyper Text Markup Language (HTML)According to [8], Hyper Text Markup Language(HTML) is the language for describing the structure of Webpages. HTML gives authors the means to: publish onlinedocuments with headings, text, tables, lists, photos, etc.;retrieve online information via hypertext links, at the clickof a button; design forms for conducting transactions withremote services, for use in searching for information,making reservations, ordering products, etc.; and includespread-sheets, video clips, sound clips, and otherapplications directly in their documents.While, Extensible HTML (XHTML) is a variant ofHTML that uses the syntax of XML, the Extensible MarkupLanguage. XHTML has all the same elements (forparagraphs, etc.) as the HTML variant, but the syntax isslightly different. Because XHTML is an XML application,one can use other XML tools with it (such as XSLT, alanguage for transforming XML content).1.3.5 WebkitAccording to official website for the WebKit OpenSource Project that, WebKit is an open source web browserengine, or the name of the OS X system framework versionof the engine that's used by Safari, Dashboard, Mail, andmany other OS X applications. WebKit is a layoutengine softwarecomponent for rendering webpages in web browsers. It powers Apple's Safari webbrowser and was previously used in Google's Chrome webbrowser. It provides a set of classes to display web content2 METHODOLOGY OF THE STUDY2.1 Algorithm Liquidizer.js Evaluation MethodIn order to evaluate the algorithm Liquidizer.js, thefollowing method was followed. The algorithmLiquidizer.js algorithm was given to web designers andshown how to use the model. They were instructed toinclude a line of code in a script tag to reference both theLiquidizer.js and jQuery.mini.js. The instructions wereexecuted by coding the following line; script type “text/javascript” src “jquery.min.js” /script and scripttype “text/javascript”src “Liquidizer.js” /script . To conduct the research Table 3shows the following web design households; CrablinksInteractive, Jaffetek Computer Solutions and MombasaTech Community were engagedTABLE 1: The Web Design Firms and Web Pages TestedNOWeb Design FirmsWeb Pages TestedIJSER 2015http://www.ijser.org
International Journal of Scientific & Engineering Research, Volume 6, Issue 6, June-2015ISSN 2229-55181Crablinks InteractiveSea View Academy2Jafftek Computer SolutionsAlmutwafy ICT Consultancy3Mombasa Tech CommunitySportsVision MagazineThe Crablinks Interactive; is a creative web design andoptimization company based in Mombasa, Kenya. Itdesigns and builds websites which depicts company'svision, brings out firms ideas and meets its businessneeds. It was chosen due to its rich portfolio in web designsuch as designing and developing in Lamu county website,Nawal center, shopping center in Mombasa with acustomized e-commerce website, Shelter Tours, a Kenyantour company, Sakafu Limited, a Kenyan floor safetycompany just to mention a few.The Jafftek Computer Solutions; is a Kenyan basedSoftware Development Company, focused on creatingutmost qualitative, on time and cost effective softwaresolution. It was chosen because of its development ofsuccessful online identities for various organizations inKenya. It has vast of experience of over ten (10) years indesigning website solutions, which meet customerexpectations. It has specialized in providing comprehensivewebsite design services in e-commerce, magneto designsand in joomla framework platform.The Mombasa-Tech Community; is a CommunityBased Organization (CBO) which focuses on inspiring anddeveloping upcoming innovative technology ideas throughnetworking, technical training and support, andprofessional mentoring and coaching. It was chosenbecause, it brings together techpreneurs, entrepreneurs,developers, designers, and investors to provide them withopportunities to learn, share knowledge, be mentored, andinitiate novel ideas which will lead to the development ofnew technologies in Kenya and globally at large. The studytargets its professional mentors and coachers webdesigners, to conduct the review process. The webdesigners are then given a questionnaire to give theircomments on observations they have made as regards theLiquidizer.js algorithm framework. The questions are basedon software usability models.models of software quality. According to [20], the basic ideain all software quality models is to define software quality,which is a term that is too abstract to be studied directly, bydividing it into attributes (usually called quality factors).One of these factors is usability, a concept that is alsoabstract and therefore is usually divided into more specificattributes (usually called characteristics). In some models,these characteristics are further divided into subcharacteristics and so on, always with the same concept inmind: to divide an abstract term into better defined terms(terms that can be measured objectively or with a reducedlevel of subjectivity).It is reported [15] that, usability is dividedaccording to three Factors Criteria Metrics (FCM) model as:Operability, Training and Communicativeness. Thesecriteria are associated only with the usability factor.Operability is associated to the user’s effort for operationand operation control (for example mouse support, macrocommands, etc.). Training is associated to the effortrequired to teach the use of software to the user, whilecommunicativeness is associated to how well the softwarecommunicates to the user the purpose for which it has beendeveloped and the method to use it. Based on the FCMmeasurement method, each criterion could be associatedwith metrics in the form of questions allowing subjective“yes”IJSER2.2 Usability Model TypesThis study presents usability perspective in mostfrequently used models of software quality characteristics,namely Factors Criteria Metrics (FCM) Model, and ISO 9126Model. Furthermore, it discusses their limitations andstrengths, in order to decide the best model to be adaptedby the study2.2.1 Usability in Factors Criteria Metrics (FCM)ModelUsability is an important factor of software quality.Usability has always been present, even in the very first12172.2.2 Usability in ISO 9126 ModelThe usability in ISO 9126 Model is based on FCMmodel, international efforts lead to the development of theinternational standard ISO 9126 for software quality. ISO9126 comprises of a basic set of 6 independent sability,Efficiency, Maintainability, and Portability. Unlike FCM,ISO 9126 is completely hierarchical and relates each subcharacteristic to only one of the basic characteristics.According to [6], usability can be divided intounderstandability (which is the user’s effort for recognizingthe underlying concept of the software), learnability (whichis the user’s effort for learning how to use the software) andoperability (which is the user’s effort for operation andoperation control like mouse support, macro-commands,etc.). ISO 9126 is currently used by many softwaredevelopers to define quality goals and usability is always aprime concern in software quality. Table 4 summarizes thecharacteristics and sub-characteristics of ISO 9126.IJSER 2015http://www.ijser.org
International Journal of Scientific & Engineering Research, Volume 6, Issue 6, June-2015ISSN 2229-55181218TABLE 2: Source: ISO 9126 Characteristic and sub-characteristics (Abran, Khelifi, Suryn, & Seffah, anationUnderstandabilityDoes the user comprehend how to use the system easily?LearnabilityCan the user learn to use the system easily?OperabilityCan the user use the system without much effort?AttractivenessDoes the interface look good?After an extensive analysis of the three models of FCMModel, and ISO 9241 Model, it is clear from the abovediscussion that, FCM Model and ISO 9241 are enhancedmodels to form the ISO 9126 Model. Therefore, the studyadapts the ISO 9126 model by using the qualitycharacteristics of usability and sub-characteristics ractiveness to evaluate Liquidizer.js framework to bemeasured by web designers. Based on the FCMmeasurement method, each sub-characteristic is associatedwith metrics in the form of questions allowing the webdesigners a “yes” or “no” answers.2.3 Algorithm Liquidizer.js TestingMatt Kersley RWD testing tool is used for the study. Itis described by [9], as a testing tool that allows viewingresponsive website in various screen sizes simultaneouslyin a single screen, while building or designing websites.The study prefers this tool mainly because it shows all thescreen resolutions side-by-side which makes it easier fordebugging. It is an online tool, which can be accessed athttp://mattkersley.com/responsive/. The Fig 1 belowdemonstrates how the interface of the Testing Tool works.IJSERFig 1: Matt Kersley Default Interface Adapted from (Kersley, 2012)The tool has been built to help with testing responsivewebsites while designing and build. One can enterwebsite's URL into the address bar at the top of the page(not browser's address bar) to test a specific page.2.4 Algorithm Liquidizer.js ValidationThe study used the Bersoft Image Measurement (BIM)tool for algorithm Liquidizer.js validation. BIM is apowerful image asset management tool that makes it easyto measure, acquire, store, compare and analyze digitalimages. BIM performs image analysis functions that includegray scale and 24 bits color measurements: angle, distance,perimeter, area, point, line, pixel profile, object counting,histogram and statistics. BIM supports DICOM, JPEG, TIFF,and most popular image formats. The Fig 2 shows the snapshot of BIM interface [2].Fig 2: The BIM Interface adapted from (BIM, 1995)3 DATA COLLECTION AND ANALYSIS3.1 IntroductionAs software becomes more and more pervasive, therehas been a growing concern in the academic communityand Business world about software quality. This concernarises from the acknowledgment that the main objective ofsoftware in industries is to balance price and quality to stayahead of competitors. Some standard organizations, such asISO and IEEE, tried the standardization of software qualityby defining frameworks combining and relating softwarequality characteristics and sub-characteristics.3.2 Measuring Usability with the USE QuestionnaireThe Usability questionnaire was developed over timeand it started out with a large pool of items. It was reportedby [12] that, “The questionnaires were constructed asseven-point Likert rating scales. Users were asked to rateIJSER 2015http://www.ijser.org
International Journal of Scientific & Engineering Research, Volume 6, Issue 6, June-2015ISSN 2229-5518agreement with the statements, ranging from stronglydisagree to strongly agree. Various forms of thequestionnaires were used to evaluate user attitudestowards a variety of consumer products. Factor analysesfollowing each study suggested that users were evaluatingthe products primarily using four dimensions; Usefulness,Satisfaction, Ease of Learning and Ease of Use.”The questionnaires were constructed as seven-pointLikert rating scales, e.g. from -3 (totally disagree) to 3(totally agree), [12]. Therefore, the study adopts the USEQuestionnaire for Measuring Usability to conduct a surveyto evaluate the usability of the algorithm Liquidizer.js. Thelikert scale was coded as; 1 “Strongly Disagree”, 2 “Disagree”, 3 “Slightly Disagree”, 4 “Neutral”, 5 “Slightly Agree”, 6 “Agree” and 7 “Strongly Agree”.The data collected was evaluated using Statistical Packagefor the Social Sciences (SPSS).3.3 Data CollectionThe study employed purposive sampling as itssampling technique to arrive at a sample of thirty (30) webdesigners. This concur with a report by [12], who explainsthat,purposivesamplingrepresentsa group ofdifferent non-probability sampling techniques. Also knownas judgmental, selective or subjective sampling, purposivesampling relies on the judgment of the researcher when itcomestoselectingthe units (e.g.,people,cases/organizations, events, pieces of data) that are to bestudied. Usually, the sample being investigated is quitesmall, especially when compared with probability samplingtechniques.Therefore the study purposively selected a sample often (10) web designers from each of the three (3) softwarehouseholds of; Crablinks Interactive, Jaffetek ComputerSolutions and Mombasa Tech Community to arrive at asample of thirty (30) web designers. The web designerswere instructed on how to use the Liquidizer.js. Moreover,the web designers were briefed on how to capture theirperception on the Liquidizer.js using the questionnaires.To evaluate the Liquidizer.js, the study conducteda survey to explore whether there is a relationship in theweb designer’s perception of the three dimensions ofUsability; Usefulness, Satisfaction, and Ease of Leaning(independent variables) and Ease of Use (dependentvariable) of the Liquidizer.js. As a result of which the studypresented the following hypothesis:a) H0 - There is no relationship between theperception of dimensions of usability and ease ofuse of the Liquidizer.jsb) H1 - There is a relationship between the perceptionof dimensions of usability and ease of use of theLiquidizer.js1219The questionnaires were immediately collected after thesurvey and analyzed using Statistical Package for SocialScience (SPSS) version 20.3.4 Data AnalysisTo test the Liquidizer.js the study uses the Matt KersleyRWD Testing Tool. The tool presents visual output of thepage in question either being responsive or not after orbefore implementation of the Liquidizer.js, bysimultaneously simulating varying screen sizes of variousdevices.To validate the Liquidizer.js the study uses BersoftImage Measurement (BIM) tool. The tool is applied on boththe generated digital images of frameworks of Liquidizer.jsand BlocksIt.js algorithms. Three analytical tests of LaneProfile, Pixel Profile and descriptive statistics areconducted. The results are compared and interpreted.To evaluate the Liquidizer.js descriptive statistics,correlation and regression analysis are conducted usingStatistical Package for the Social Sciences (SPSS). Thequestionnaires are inputted in SPSS to create a model. Themodel is use to output results of different analysis tests.IJSER4 FINDINGS OF THE STUDY4.1 IntroductionIn this section, the research findings and results of thestudy were presented into threefold; firstly, the testing ofthe Liquidizer.js by the Matt Kersley RWD Testing ToolResults, secondly, the validation of the Liquidizer.js byBersoft Image Measurement (BIM) tool Results and thirdly,the evaluation of Liqudizer.js by Statistical Package for theSocial Sciences (SPSS) Results. The SPSS tool conductedvarious tests to find relationship between variables, level ofsignificance, reliability, and demographic data analysis.Specifically, the study used Cronbach's alpha test,descriptive statistics tests, chi-square, Pearson correlationand Regression analysis. As a result of this, the chapter istriggered and guided by the objective four of the study.4.2 Results for Liquidizer.js TestingThe Matt Kersley RWD testing tool was used tosimulate varying screen size from mobile phone to a mainframe computer. The Fig 3 (a) presented the result beforeimplementing the algorithm Liquidizer.js, while the Fig 3(b) showed the findings after implementing the algorithmLiquidizer.js. The results are interpreted according to visualobservation, whereby the page before integrating theLiquidizer was not responsive since the graphics and themenus are distorted and not fitting a single page. While Fig3 (b) is responsive since the page can be viewed in singleview without the graphics or menu being distorted.IJSER 2015http://www.ijser.org
International Journal of Scientific & Engineering Research, Volume 6, Issue 6, June-2015ISSN 2229-5518Fig 3: (a) Before implementing AlgorithmMoreover, further responsive tests were conductedusing Matt Kersley RWD testing and simulator tool onvari
Web design is a dynamic field which evolved around user viewing experience trends. The recent trends have revolutionized the web design approach technologies. The result of which, Responsive Web Design ) concept was coined by Web Designer
