The role of HTML5 and Flash in Web Design. By Kaela SooHoo. Graphic Communication Department. College of Liberal Arts

Transcription

1 TheroleofHTML5andFlashinWebDesign ByKaelaSooHoo GraphicCommunicationDepartment CollegeofLiberalArts CaliforniaPolytechnicStateUniversity SanLuisObispo,2012 1

2 Abstract KaelaSooHoo GraphicCommunicationDepartment,June2012 Advisor:XiaoyingRong ThepurposeofthisstudywastodeterminewhetherHTML5willreplaceFlashin thewebdesignindustry.usingtheinformationtakenfromthestudy,theresearchermade apredictiontoanswertheformerquestion. Theresearcherlookedfurtherintotheseprogramsandfindinformationto determinewhatitisthatmakeseachoftheseprogramsuniqueandpossiblyreplaceable. Theresearcheralsointerviewedandsurveyedthosewhousedtheseprogramstodesignor viewonlinewebsitestogaininsightonpracticalityandcurrenttrendsinthewebdesign industry. Throughresearchandexperimentation,theresearcherdecidedthatHTML5may replaceflashinthewebdesignindustrybecauseofthefoundtrendsintoday ssociety. HTML5surelyhasmuchmoreworktogobeforebeingcompletelydevelopedasauseable program,butonceitisflashwillslowlydisappearfromtheweb.adobeflashmayhave lostitsrelevanceinwebdesign,butitissurelynotdisappearingcompletelyanytimesoon duetotheseveralotherpurposesitservesoutsideoftheweb. 2

3 Table of Contents Chapter1 Introduction 4 Chapter2 LiteratureReview 7 Chapter3 ResearchMethodsandProcedures 20 Chapter4 Results 22 Chapter5 Conclusions 31 AppendixA Questionnaire/Survey 34 AppendixB InterviewQuestions 36 References 37 3

4 Chapter 1 Introduction Statement of the Problem Thewebhasbecomeoneofthemostpopularformsofmediatoshareand communicateinformationthroughouttheworld.theuseofhypertextmarkuplanguage (HTML)isthestandardmethodofdisplayingthisinformationforusersontheweb.Web developersareconstantlylookingforwaystohelpenhancewebusersexperiencesthrough interactivity.inordertocreatethisinteractiveaspectofwebdesign,applicationssuchas AdobeFlashhavebeendeveloped.Flashgiveswebdesignerstheopportunitytomake interactivewebsitesthatcouldnothavebeendesignedinhtmlalone.bothmethodshave theirownpositivesandnegatives,butwiththeintroductionofhtml5,whichhasthe capabilityofaddingtheinteractivitythatflashdidbefore,flashmaynolongerbeneeded. ThenewHTML5isdesignedtobeaneffectivenewwayofcodingthatpromisesusersa betterwebexperience,replacingtheolderstandardsacrossalldevices.therefore,the purposeofthisstudyistodeterminewhetherthedevelopmentofhtml5willeventually replaceflashinthenextfewyears. Significance of Research Webdesignisimportantinthegraphiccommunicationindustry.Withtheeverchangingtechnologyandgrowingpopulationusageofmobiledevicesandtablets,itis 4

5 imperativetounderstandhowtodesignforeachofthesedifferentapplications.inorderto dosoonemustbeabletousethetoolsavailableinthemosteffectiveandefficientway.the listofthingstotakeintoconsiderationwhendesigningawebpagetodayisconstantly growing.adesignermustbeawareoffactorssuchassearch ability,typography,loading time,screensize,andmore.becauseofthecombinationofthesedifferentfactorsandthe constantchangeincommunicationdevicesandbrowsers,creatingawebsitecaneasily becomeachallengeforthedesigner.itisnecessarythatthedesignercreateanexperience thatmeetsuserexpectations.inordertodosothedesignermusthaveafullunderstanding ofbothprogramsflashandhtmlsothattheycanapproachtheprojectandmeetallofthe needsoftheirclientinthemostcosteffectiveandpracticalway. FlashmayhavelimitationsfulfillingtheneedsofusersthatthenewHTML5alone maybeabletosolve.consequently,itisnecessarytohaveanunderstandingofthe advantagesanddisadvantagesofbothflashandhtml5inordertomakeaninformed decisiontoanswerthequestionofwhetherhtml5willreplaceflashandbecomethenew standardinwebdevelopment. Interest in the Problem AsaGraphicArtistinterestedinthewebdesignfieldofGraphicCommunication,the researcherisinterestedinunderstandingthedifferentapplicationsthatareusedinthe processofcreatingasuccessfulwebsite.thisstudyintendstounderstandhowtomeetthe needsofclientsbycreatingawelldesignedwebsitebyhavingacompleteunderstandingof thestandardtoolsofflashandhtml,andhowtoapplytheminthemostefficientway 5

6 possible.webdesignerstodayhaveabiggerjobthanbefore,tocreateawebsitefornot justtofitandlooknicelyonthecomputer,butforthesmartphoneandtabletdevicesas well.theannouncementofhtml5hasmadeahugeimpactinthegraphiccommunication industry,andithasbeenspeculatedthathtml5willbethefuturestandardofwebdesign. Theresearcherrecognizestheimportanceofunderstandingthebenefitsandweaknessesof boththeseprogramsinordertobesuccessfulinthefutureasawebdesigner. 6

7 Chapter 2 Literature Review Withthechangingtechnologiesandgrowthinwebdevelopment,itisimportantto understandthetoolsthatcouldbeusedtodesignandtocreateanallaroundeffective websitefortheviewer.thisliteraturereviewbeginswithanexplanationofthetwo methodsthatareusedtocreateandincorporateinteractivityintowebdesign;oneusing Adobe FlashandtheotherusingHTML5.Thisreviewexaminesthebenefitsofeach programandhowtheyarebeingusedtodayandhowtheywillbeusedinthefuture. Adobe Flash Adobe Flash wasfirstreleasedinthemid 1990sasamultimediaplatformtoadd animation,videoandinteractivitytowebpages.flashisfrequentlyusedfor advertisements,games,andflashanimationsforbroadcasts.ithasbeenusedtocreate moreinteractivegraphicallypleasingwebsitesandhasmoredesigncapabilitiesthanother methodsthatusecoding.withtheuseofthefreeplug inofadobeflashplayer,web browsersareabletodisplayanimationsbuiltwithflashfromanywebsiteforany computertosee.withthesetoolsathand,companiesareabletocreateanenhancedweb experiencefortheironlinevisitorstohelpadvertiseandappealtoviewers. AnothercommonuseofAdobeFlashistocreateinteractivegames.Severalof today smostpopularbrowser basedgameswerecreatedusingthisprogram.infact,oneof 7

8 themostpopular,angrybirds,wasmadewithflashplayer11.actionscript,whichisa formofcodinginadobeflash,isanothermethodthatmakesitpossibletoproducehigh qualityanimationsthataresuperiortothosecreatedbyothermethods. Flash as a main method of Web Development AccordingtoJesseRedniss,theVicePresidentofCableTV susa Network(Taft, 2011),Flashprovidesaneaseofdevelopmentprocessononeplatform,andalsoaneaseof costandeaseofdevelopmenttimeline. RobertBoerifromEContentMagazinelistsoutseveraloftheadvantagesofusing Flashfilesfortheweb(2011). Advantages Flashfilesaresmallanduseveryfewcomputingresources. AlthoughFlashrequiresconstantupdates,theyarenotmuchofabigdeal, andareeasytoimplement Itrunsnearlyeverywhere,from95%to99%ofwebaccessibledevices (OnlyexcludingApplemobileproducts) Flashrunsonthe3majorcomputingplatforms thosebeingwindows, VariousflavorsofUnixsuchasLinuxandSolaris,andMacOS andinall majorbrowsers. Disadvantages Editability 8

9 SearchPurposes(SEO) Notavailable/willnotworkonanyofApple smobiledevices AdobesaysitnolongerplanstodevelopfutureversionsofFlashPlayer formobilebrowsers AdobehasfacedincreasedvulnerabilitiesintheAdobeFlashstandard exposedbyhackers(smith,2011) Future Outlook for Flash Applications WithApple sdecisionin2010alreadymadebydismissingthesupportofflashin anyoftheirmobiledevices,adobehasannouncedthatitisnolongerworkingon developingflashformobileplatforms(moren,2012). Flashstillplaysaprominentroleinwebdesigntoday.Althoughthenextgeneration ofhtmlisbelievedtoreplacetheprograminthefuture,theprogramisstillpredictedto makeprogressintheindustry.accordingto DanMorenfromMacworldmagazine,Flashis undergoingimprovementforfutureversions.insteadofworkingonimprovingits technologyinmobileapplications,adobeplanstocontinuedevelopingflashonthe desktop,whereitwillworkhand inhandwithhtml5(2012).dannywinokurfromadobe saysthatwiththehaltofdevelopmentonflashformobileplatforms,flashwillincrease investmentandinnovationwithflashwhereitcanhavethemostimpactfortheindustry whichwillincludeadvancedgamingandpremiumvideo(2011). ApplecurrentlycontinuestodrawbacktheirsupportforFlashonMacproducts. Applehasalreadystoppedincludingtheplug inontheirmacintoshproducts,sousersthat 9

10 wantithavetodownloaditthemselves(moren,2012).danmorenexpresseshisconcern forthefutureofflashontheweb, It shardtoimaginethatsoftwaremakerswillcontinue toembraceatechnologythatisreachingfewerandfewerplatforms (2012). HTML5 In2009,thefirstworkingdraftofHTML5wasintroduced.HTML5isthenext evolutionofwebdevelopmentstandardsbywhichapplicationdeveloperscreateend user experience.html5isacombinationofhtml(hypertextlanguage),css(cascadingstyle Sheets),andJavaScriptallinone.Grensing Pophal(2011)explainsthatHTML5createsa universalsetofcapabilitieswithoutofplug insthatisfreelyavailabletobothusersand developers.already,somefeaturesofhtml5arebeingincorporatedintovarious webpagesandapplications.html5iscurrentlysupportedinapplesafari,googlechrome, MozillaFirefox,Opera,andmostrecentlyInternetExplorer9browsersinadditiontomost mobilewebapplications. Ultimately,thepurposeofHTML5istocreateasimpler,faster,andcheaperwayto runawebsite.html5hasseveralnewcapabilitiesthatoffermuchmoreforthewebina simplerformofconstruction.thenewstandardwilloffernewfeaturesandallowformore artisticexpression.html5offersconsiderablepotentialforthefuture,soitisimportantto beawareofitscapabilitiesandhowtheymaybeused.thereisnodoubtthathtml5will makeahugeimpactonthewebinthefuture,andissomethingthatwebdesignersneedto knowabout. 10

11 NoneedforPlug ins Bradshaw,aprincipalofClickHere,adigitaladvertisingandmarketingagencyin DallasstatesthatwithHTML5, youarenolongerrequiredtostreamyouraudioandvideo filesthroughaflashplug in.thissignificantlyreducesdownloadtimesandtheoretically reducestheloadonthecpu, (Grensing Pohpal,2011).Thiswillletpeopleloadandshow thiscontent natively intheirwebbrowsers.thisshouldmakeforasimpler,faster,and moresecureexperience.(whathtml5willchange,2010) Mobileapplications Unlikeplug inapplicationssuchasflash,everythingthatisneededisbuiltintothe HTML5coding.Frequently,withpluginapplicationsdevelopersmustmakeanadditional paymentfortheiruse.someprogramsrequiremultipleplug insdependingbothondesired functionalityandbrowserbeingusedtoaccessinformation.html5makestheuseofpluginsobsolete(grensing Pophal,2011). OneofthemostimportantbenefitsofHTML5isthatitiscapableofmakingtheWeb usefulonmobiledevices.thisincludesthosefromandroidphones,iphones,ipads,tablets, andmore.webkitisanapplicationthroughhtml5thatmakesiteasyforawebdesigner tocreateawebsitethatwilladapttoalldifferenttypesofmobiledevicestolookgreaton allscreensizestohelptheviewergetthemostoutoftheironlineexperience.itsopensourcebrowserengine,thesoftwarecomponentthattranslatesthecodeofawebpageinto whatappearsonthescreen.(whathtml5willchange,2010).todayitisthedominant engineformobilewebbrowsing. 11

12 WhenApplelaunchedtheiPhonein2007,itdramaticallyalteredtheexpectations thepublichadforthemobileweb.untilthen,mostsmartphonesofferedonlya substandardversionofthewebasitappearedonpcs.apple,however,optedtousethe samesystemthatunderpinneditsdesktopsafaribrowser:webkit.in2008googleadopted WebKitasthebasisofitsChromebrowser,bringingittodesktopsandAndroidphones.A stringofphonemakersfollowed:nokia,palm,samsung,andthemakeroftheblackberry, ResearchinMotion,haveincorporatedWebKitbrowsersintotheirhandsets.(WhatHTML5 WillChange,2010) CodingStructure HTML5makesuseofanew<article>,<section>,<nav>and<header>taginthe codingthathelpswiththeorganizationandstructureofawebpage.new tags inthe codingofsiteswillhelpthembetterorganizetheinformationtheyresendtosearch engines automatedindexers.thatcouldmakesearchresultsmorerelevantforeveryone (WhatHTML5WillChange,2010).Theuseofcodingalsoallowslessofaneedforimage use,sincesearchenginessearchusetextinwebsitesandcannotdrawinformationfrom imagesalone. Animation TheincreaseddevelopmentinHTML5hasalsocausedadevelopmentinCSS,with theupcomingcss3thatworkshand in handwithhtml5.html5enablesrichanimated effectsforthecontentthroughcss(cascadingstylesheets).anexampleoftheuseofthis newcssistextwrap,givingdesignersmorecontrolovertheflowoftextinhtmlbyletting themwraptextaroundgraphicsandcustomshapes,enabelingalmostmagazine likelayout 12

13 design.anotherexampleoftheseeffectsisthecssshaders,whichisbasedoffofadobe s PixelBendertechnologywhichsupportsdropshadowsandfadeingraphicsthroughthe coding(taft2011). Canvas The canvas tagisanewfeatureinhtml5thatallowsgraphicsorothervisual imagestoberenderedprogrammatically.animatedgraphicsandotherinteractivecontent won tneedaplug in.anew canvas tagwillletwebdesignerscreategraphicalelements inhtml(whathtml5willchange,2010).thismeansthatgraphicsandanimationscan bebasedonuserinteractionsorotherbehaviors(grensing Pophal,2011) InteractionandEditabilityforUsers ThearticleWhat HTML5 Will Change (2011)talksabouthowHTML5willaffectthe interactiononwebsitesandtheedibilityitmayhaveforboththecreatoranduser. Content Editing Userswillbeabletoedittextinselectedportionsofapage.Theymightjotdown notesaboutwhatthey veviewed,andthosenoteswillappearwhentheyreturnto thesite. Drag and Drop Dragginganddroppinghasbeenthestandardwaytomovefilesaroundacomputer desktop.nowhtml5isbringingittotheweb.youcouldquicklyuploadanew photoofyourselftoasocialnetwork. 13

14 Chat Anapplication programminginterfaceassociatedwithhtml5willletweb Developerssetupasimplechatprogram.Thatcouldlettheirusersinteractwith eachotherbeyondthelimitsofacommentssection. TypographyandDesign OneofthemostexcitingfeaturesofHTML5isthatitallowsformoreinnovationin designthroughcoding.html5enableswebsitestocreateadvancedgraphicsand animationsandrichertypography(whathtml5willchange,2010).thiscapabilityalso makeswebsitesmoreappealingonallscreensizes.webkitenablesanewexpressiveness usinghtmlonly. Weaknesses AlthoughHTML5mayseemlikeanexcellentfuturealternativetoothercurrent applications,therearestillissuestoconsider. BeingnewtotheWorldWideWeb,HTML5maynotyetbematureenoughtohandle thehigh endentertainmentexperiencesthatotherprogramscurrentlyprovide.html5 hasnotyetbeenfullydevelopedandstillhasmoreworktobedonebeforetheprogramis perfectedforwebusenow. OneofthebiggestchallengesfacingHTML5legacybrowsersupportneededto becomeastandardforthewebdesignindustry.notallinternetexplorerapplicationsyet 14

15 supporthtml5,whichcanbedifficultbecausenoteveryonemaybeasuptodatewith technologyormaystillbeusingbrowsersthatarenotabletohandlehtml5. ImadMoulineistheCTOofGomez, Inc.,fromthewebperformancedivisionofthe CompuwareCorp.,inDetroittalksaboutthisissueineContentMagazine(Grensing Pophal, 2011): ThetypeofappsthataretakingadvantageofHTML5tendtobemobileapps, says Mouline. Theproblemwithgettingtothatlevelonadesktopisthatthebrowser marketisveryfragmented, hesays. Thespecificationshaven tbeenfully implemented.browsersthatimplementedhtml5maynothaveimplementedallof thesameparts. Fordevelopers,itbecomesachicken and eggscenario,hesays: Do IdevelopforHTML5andhopepeoplewillstartupgradingtheirbrowsers,ordoI waituntilthebrowsershavebeenupdated? Oneofthereasonsadoptioninthe mobilemarkethasbeendifferent,hesays,isthatpeoplearesimplyusingthebuiltinbrowsersthatcamewiththeirdevices. BecauseHTML5isbrandnewtotheindustry,andstillhassomeafewthingstoworkout, adoptionisgoingtotakesometimeforeveryonetobeonthesamepage.html5stillasa longwaytogo,andwillnotbeabletofixthewebovernight. Anotherdisadvantageisthatthenewimplementationwillrequireinnovatorsto agreeonstandardsthathtml5willoffer.althoughbrowsermakerstheyareagreementon mosttopics,buttheycontinuetoargueaboutwhichvideostandardstosupport.theyhave yettoagreeonasinglecodexfortheweb.asmentionedearlier,oneofthemainthingsthat 15

16 needstobetakenconsiderationistomakesurethatenoughpeopleareusingweb browsersthatcanfullyhandlehtml5. Will HTML Replace Flash? Pro Flash AlthoughmanyarepredictingthatFlashwillbereplacedbythefutureofHTML5, thereareseveralthatdonotbelievetheapplicationwillgoawayanytimesoon. OneofthereasonsthatFlashmaybearoundforawhileisbecauseFlashismore suitedthanhtml5istologic heavyenterpriseapplications,whereverapplicationsusebig datasetsorcomplexbusinesslogic.anexampleofthiscanbebrowserbasedgaming, which isalmostalwaysflash, evenwhenitisembeddedinhtml5pages.rjowen,the seniorsoftwarearchitectateffectiveuibringsupagoodpointwithaninterviewwith eweek(taft,2012), Flashisgoodatthevisuallayer Itsawesomeatthat butifiwanttodoimage processingonaphone,whichisalreadylowpower,iwanttodothatinnativecode andbeasefficientasican.sotheabilitytodivideuptheresponsibilitiesbetween theplaceswhereitwillrunbest that samazing. AlthoughHTML5maybeabletoperformseveralofthetasksthatFlashcan,the interactivitythatflashcanhandlemightbemorepracticaltobeusedinapplicationsto helptheprojecttoperformmoreefficiently.dannywinokurinanpostfromadobe(taft, 2011)supportsthisideabystating, 16

17 It snotevenoneortheother.thereareahugenumberofprojectsthaticanthinkof wherehtmlandflashgetcombinedinasingleproject.thekeymessageiswe re allaboutgivingthecontentcreatorordevelopertherichesttoolbox. Ultimatelyitseemsthatwhatitcomesdowntoisthattheuseofthesetoolsismoreabout choosingwhichisrightforyouandyoursituation.thepersonthatdecidesonwhattoolto useisbasedoffofthecontentcreator. Pro HTML5 ManyindustryleaderspredictthatHTML5willinfactbethenewstandard,andthat AdobeFlashwillcometoitsend. OneofthemostimpactfuleventsthathavecausedmovementtowardsHTML5isthe lackofsupportthatapplehasforflashapplications.theintroductionofapplesnewest product,theipadtablet,applecontinuestosupportonlyhtml5.thisdisabilitymakesit impossibleforthesedevicestoseeanyvideosoradvertisementsthatmayhavebeen createdusingflash.witheachoftheseappleproductsrapidlygrowingmorepopular,the needforaprogramthatwillsupportthesedevicesgrowsaswell(boeri,2011).applehas, somewhatcounterintuitively,becomeoneofthebiggestplayersontheweb,despitethe factthatithasdriventheapprevolutionandholdsonlyaslimshareofthebrowsermarket (WhatHTML5WillChange,2010).SteveJobsargumentwasthatflashwasa processor andanunstablebatteryhoggingstandardthatcauseditsdevicestoperformimproperly. SteveJobshopedfortheproliferationofHTML5,whichperformsthesamefunctionsbut canoperateacrossallplatforms(ozer,2011). 17

18 AdobesayingthatFlashonmobileisn'tthebestpathforward(isnotequalto)Adobe concedingthatflashonmobile(orelsewhere)isbadtechnology,"hewrote."its qualityisirrelevantifit'snotallowedtorun,andifit'snotallowedtorun,then Adobewillhavetofinddifferentwaystomeetcustomers'needs. SteveJobs(Smith, 2011) Withthisathand,itisapparentthatHTML5maybecomeanattractivealternativetoFlash thatdoesnotworkontheseothermobiledevices. HTML5hasmadealargeimpactonwebdesignisbecauseitenableswebsitesto createadvancedgraphics,animations,andrichertypography.forexample,itselegancehas alreadyimprovedthedocumentsharingwebsitescribd.com,oneofthemostprominent sitestobeginusingthoseelementsofhtml5thatwebbrowserscanrecognizetoday.the articlewhat HTML5 Will Change(2011)explainshowScribd sfoundersusedtofretthatthe site,whichusedflashtodisplaydocuments,didn tlookthatgreat.thethingspeople postedweren tasreadableoraseasytomanipulate,astheyshouldhavebeen.they appearedinaframe,like documentsinabox, asscribdcofounderjaredfriedmanputit. Tofurtherexplaintheirexperience(WhatHTML5WillChange,2010): Scribd sengineersspent6monthsrebuildingthesite.theystoppedusingflashto displaydocuments,eventhoughthatmeanttheyhadtoconverttensofmillionsof filestohtml5.eventuallytheirexhaustingcodingmarathonspaidoff.afterthe renewal,scribd spageslookedcrisperbecausethedocumentshadcomeoutoftheir boxes.nolongerdiditseemasifusershadtoviewfilesthroughalens.readers 18

19 beganstickingaroundthreetimeslonger,friedmansays. Itwasfantastic, hesays. Evenweweresurprisedhowgoodthemetricslooked. Scribd sexperiencewithhtml5hasprovenusefulandhasresultedinexcellentresultsfor hispurposes. SomestatisticstoalsosupportthereplacementofFlashbyHTML5comefromThe HTTPArchive,whichcollectssitedatafromoverthousandsofsitesallovertheWeb.This websiteshowsthatadobeflashusageontheinternet stop100websiteshasdropped from38%to34%betweennovember2010andjuly2012.doingagooglesearchfor "flashdeveloperjobs"fromthepast24hoursturnsup511,000results;ayearagothesame searchproduced832,000results.bythesametoken,searchingfor"html5developer jobs"turnsup243,000resultstodayvs.116,000ayearago.(pachal,2011) Chapter Summary ItisapparentthatbothFlashandHTML5havemadealargeimpactontheweb designindustryingraphiccommunication.bothprogramshavetheiradvantagesand disadvantagestowebdevelopment,aswehaveseenexamplesofhowcompaniesinthe industryhaveimplementedbothapplicationsfortheirownpurposes.itappearsfornow thatflashdoesnotseemtobegoinganywhereanytimesoonwiththeongoing developmentofhtml5.html5stillhassomeworktobedoneandbugstobefixedbefore itusfullyexecutedintothewebdesignindustry.todetermineifflashwillbereplacedby HTML5inthefutureofwebdesign,furtherstudyandexperimentationisrequired. 19

20 Chapter 3 Research Methods and Procedures TounderstandthequestionofwhetherHTML5willreplaceAdobe Flashinthe futureofwebdesign,itisimportanttounderstandtheuserandcreatorsstandpointon whichmethodmaybebetterforoursituation.thereforethepurposeofthisresearchwas tocomparetheusabilityofhtml5vs.adobe Flashforwebdesign.Theprocedurethatwas usedtodeterminetheanswerofthisquestioninvolvedtwoexperiments.these experimentswereconductedonagroupofselectedsubjectswhoobserveddifferent websites,andtheagroupofselectedwebdesignerswhodesignedusingbothflashand HTML. Thegrouptobestudiedforthefirstexperimentconsistedofagroupofpeople varyingintheageof16to50.thisgroupofpeoplewasthosewhousecomputersonadaily basis,butarenotnecessarilybeknowledgeableofthetwodifferentprogramshtml5and Flash.Inthisexperiment,thesubjectwasgiventwolistsofwebsites,thefirstlistof websitescreatedinhtml5,theothercreatedusingadobe Flash.Thesewebsiteswereall welldesignedandinvolvedtheuseofinteractivitythroughasmanywayspossible.the subjectwasthentoldtochooseonewebsitefromeachlisttoobserve.whenviewingthe twowebsites,thesubjectdidnotknowhoweachwebsitewascreated.alistofitemsfor thesubjecttoviewoneachofthespecificwebpageswasgiventothemtoexamine.after examiningthetwowebsitesfor10minutes,thesubjectwasgivenalistofquestions (AppendixA).Thepurposeofthesesurveyquestionswastoexaminetheusersexperience witheachofthedifferentwebsites,andtocomparewhattheymayhavelikedanddisliked 20

21 abouttheirexperience.subjectsweregiventheopportunitytogiveopen endedresponses andwasaskedtoexplainthereasonforhisorherpreferenceofaspecificsite.theywere thenaskedtoopeneachwebsiteontheirmobilephoneandanswerquestionsaboutthat experience. Thenextphaseistoapproachthetopicthroughadesigner spointofview.this studyshowedhowusinghtml5versusflashmightchangehowapersonisdesigningfor theweb.thisexperimentinvolvedwebdeveloperswhocurrentlyworkinthewebdesign industry.thesedesignerswerefamiliarwithbothadobeflashandhtmlmethodsofweb design.aninterviewwithalistofquestions(appendixb)pertainingtothistopicwas asked. Thepurposeofthismethodologyistoapproachthesubjectthroughacreator s standpoint.theresearcherintendedtogaininsightfromthesedesignersthroughtheirweb designingexperiencewiththetwoapplications.fromthispointofviewtheresearchercan seewhichmethodologymaybebestforuseinspecificsituationsinwebdesignandhow peoplewhousetheseprogramsintherealworkforceworldmayfeelaboutthem. 21

22 Chapter 4 Results and Discussion AfterconductingtheresearchmethodsandproceduresthatwerestatedinChapter4, theresearcherwasabletogainsomeusefulinsightonthetopicfromboththeuserand creatorsstandpointoftheprogramsflashandhtml5.trendsinthecurrentwebdesign industryhavebeenidentifiedfromtheseresultsandtheresults.thischapterisananalysis ofimportanttakeawaysfromtheresultsgatheredfromexperimentation. The Designers Point of View Thedesigner spointofviewwasreflectedthroughtheinterviewquestionslocated inappendixa.thesequestionsweregiventoagroupofsuccessfulwebdeveloperswho arecurrentlyworkintheindustryandhaveexperienceusingbothhtmlandflashtobuild website. Key factors to creating an effective website Inordertocreateasuccessfulwebsite,therearemanythingsthatadesignermust takeintoconsideration.kevinluttrell,fromnightowlstudiosaysthat, firstandforemost, itneedstoserveapurposeandcommunicatethatmessageclearlyoutofthegate. Everythinghastocommunicate;visuals,writtencopy,UI,UX. WyethStylesfromInflight StudioalsoagreedwithKevinthatawebsitemustdeliverthemessageinaclearsimple way.wyethalsolistedoffanumberoffactorsthattakeamoretechnicaldirectiontowards 22

23 practicaldesignforthewebviewerandownerofthewebsite.thisincludedgooddesign, easeofuse,expandability(whichistheabilitytogroworchangetoaccommodatemore contentandpages),andeaseofupdatingfortheclient. Websites for Mobile Devices Mobiledevicesareafactorthatcanbetakenintoconsiderationwhenbuilding websites,butaccordingtokevinluttrelltheuseofmobiledevicesandtabletsdonotaffect thewayhedevelopswebsitesathiscompany.hestatesthatdevelopingwebsitesforother devicesisnotapriority,sincemostsmartphonedevicesareabletorecognizecode. Wyethdescribessomeinterestingpointsabouthowthesedevicesmayaffectthe wayhedesignsfortheweb. Thereisanongoingargumentoverwhetheryoushouldbuild aseparatemobilesiteorbuildonesitethatwillexpandorcollapsetodifferentscreensizes. Therearemanyframeworksouttherethatallowyoutobuildonce,andhavethesiteresizetodifferentscreensizes butbecauseourclientsaresodesignfocused,itcanbe difficulttodo. Dependingonthesituationandpurposeofthewebsite,designingformobiledevices maybeimportant,butforthesedevelopersattheircompaniescreatingamobilefriendly websiteisnotnecessarilyconsideredakeypriority. Developing websites using Flash WyethandKevinarebothexperiencedindevelopingwebsitesusingAdobeFlash, buttodayusehtmlastheirprimarymethodofdevelopment.combinedwithphpandcss theyusewebsitessuchasdrupalorwordpresstomanagetheirpagestomakethemeasy 23

24 fortheirclientstoworkwith.althoughthesetwodesignersworkwiththesameprograms onadailybasis,theirfeelingsaboutflashinwebdesignareslightlycontrasting. WiththedevelopmentofHTML5stillundergoingdevelopmentKevinLuttrell discusseswhyflashmaybeadvantageousinsteadofcodingwithhtml5intodaysweb designworld. Ilikebeingabletoenvisionsomething,codeitanditsimplyworks.No nonsenseaboutitnotworkingonanoldbrowserorwhatever.aslongasthepluginisupto date,whichis90%ofbrowsershave,yourdesignworks.plusyouhavetheabilitytouse Adobe sgraphicstools,importillustratororphotoshopfiles,whatever.yousimplycan tdo thatwithhtml5. Ontheotherhand,WyethStilesbelievesthatthedaysofbuildingfull flashweb pagesareover.unlessawebsitehasalotofmultimediarequirements,creatingawebsitein Flashisnotnecessary.WyethalsobringsupthatbecauseFlashisnotsupportedonmany mobiledevices,aseparatemobilesitewouldneedtobedeveloped,whichcanbe cumbersome. HTML5 Thoughts HTML5hasprovenitselftohaveapromisingfuturetotheinterviewees,butbecause ithasnotbeenfullyintegratedintothewebthiscancauseaproblemforwebdevelopers whoaredesigningfornow.html5isnotyetsuccessfullysupportedbyallolderbrowsers. Thechallengeisthatvariousbrowsersseetagsdifferentlyandthatmakescoding elementsamovingtargetin thisdoesn twork onbrowserx.actuallymostofthisrelates tocss3butthingslikebeingforcedtoaddalaundrylistfortherightcodecforavideotag areinfuriating.withflashitmaybeapluginbutsomucheasiertoplaceanditworksevery 24

25 time, iswhatkevin sthoughtsaboutthecurrentstatusofhtml5.bothkevinandwyatt believethatarestillholesinhtml5thatneedtobefixedbeforeitisfullyintegrated,and havedecidedtostandoffbutcontinuelearningofitsprogressuntilitisfurtherdeveloped. Will HTML5 Replace Flash in the web design industry? Thedifferenceinopinionbetweenthetwointervieweeshasbeenapparentthrough outtheinterviewprocess.whenaskedthespecificquestionofwhetherhtml5willreplace Flashinthewebdesignindustry,bothagreedthatHTML5isheretostay,butcovered severaldifferentimportantpointstothinkaboutbeforecompletelyputtingflashtothe side. KevinLuttrellstatesthat Flashisnotawebcentrictechnology, andmakesthe researcherrecognizetheotherimportantusesofadobeflashasidefromwebdesign. Iuse FlashforthewebbutIalsouseittomake2DanimationsandassetsthatIuseinvideo projectsthathavenothingtodowiththeinternet InadditionFlashisbecomingan industrystandardforcreatinguiandmenusystemsforvideogames. Forexample,Kevin talksaboutframescale,whichisacompanythathasincorporatedflashintotheir middlewarelinefortoolsforgamedevelopers.framescale givesflashdesignersthe abilitytoleverageflash spowerfulgraphicstoolsandanimationcapabilitiestocreate designsthatareexportedintoallthemajorgameenginesandareusedforuiandmenu systems. KevinthenstatesthatHTML5ontheotherhandisawebcentrictechnologyand hasnoapplicationorusagebeyondwebdesign. Asfaraswebsitesgo,WyethbelievesthatHTML5willreplaceflash.Mostofwhat wasdoneinthepastcannowbedonewiththingslikejqueryandcss3,whichcomehand 25

26 inhandwithhtml5. AdobeiscreatingtoolslikeEdge,whichallowsyoutomaketimeline basedanimationsinhtml5.thatisastrongindicationthatpeoplearemovingawayfrom flash.theyalsohaveanewmoduleinflash6thatallowsyoutoexportflashlibrariesand layoutsashtml5. Withtheincreaseofpeopleusingmobiledevicesfortheweb,andthe factthatflashdoesnotworkonallsizeddevicesisalargesetbackforitsplaceinweb design. Summary WyethandKevinbothhadveryinterestinginsightthroughtheirinterviews. Althougheachofthemdifferedinopinionthroughseveraloftheirresponses,bothagreed thatflashwaslosingitsplaceinthewebdesignindustry.theneedforfurther developmentandsupportinhtml5isshowntobealargefactorinthegrowthofusagefor HTML5,butbothagreethatonceitiscompleteditmayreplaceFlashmadewebsitesdueto thefactthatitisnotsupportedbythegrowingmobileworld. The Users Point Of View Thesecondhalfoftheresearchersexperimentationprocessinvolvedthesurveying ofafewselectedpeoplewhovaryinknowledgeandpersonalpreferencewhenitcomesto webdesign.ofthefollowingcategories,hereistheirreactiontoafewofthemostrelevant categoriestotheresearchbeingdoneonthetopic.throughthisexperimentweareableto seehowhtml5versusadobeflashbuiltwebsitesmayhaveaffectedtheirreaction. Loading Speed 26

27 Oneofthemostrelevanttakeawaysfromthissurveywashowtheinterviewee sfelt abouttheloadingspeedtimeforeachofthepagestheywereassignedto.resultswerevery consistentforthiscategory.outofthehtml5websites,eachpersonstatedthattheir websiteloadedquickly,andthattheydidnotfaceanyissues.asforthelistofflash websites,everyoneseemedtohaveaproblemwithloadingspeed,whetheritbewith openingthewebsite,orbrowsingthroughitfrompage to pageorimage to image.oneof thepeoplesurveyedevenquotedforoneofthewebsitestheyobserved, Iwouldhave clickedawayimmediatelyifitwasn tforthissurvey. Asmostoftheinterviewee s complainedsignificantlyaboutthistopic,itappearsthatloadingspeedisalargepriorityto webusers. Navigation & Design Navigationandtheabilitytobrowsethroughawebsiteisveryimportanttoa personviewingitwhiletryingtofindsignificantinformation.becausetherearesomany optionsofstylesonhownavigationcanbepresented,itwashardertoanalyzetheresults fromtheinterviewee sperspective,whichiswhytheresearcherhaschosentocombinethe twocategories. Thetakeaway sfromthiscategoryoftheexperimentwastheimportanceofdesign andnavigationforauser.theusersearchersforeaseandsimplicityandappreciatesgood designusinggoodcolorpalettesandreadablefonts.convenienceappearstobekeyfor navigation,aswebsiteswithmorecomplexdifficulttofindnavigationweremoredisliked. Theresearchersresultsfoundthatdesignandnavigationdependpurelyonthedesigner andhowtheyapproachthewebsiteratherthantheprogramsthattheyusetoputit 27

28 together.theresearcheralsorecognizedthefactthateveryindividualhasadifferenttaste andpreferencefordesignfromthevariationofresultsinthiscategory. Interactivity Eachofthewebsiteshadavariationofinteractivityandanimationineachofthem. TheFlashmadewebsitestendedtohavemoreintenseanimationswithsoundeffectsand movingobjectsthroughoutthepage.typicallythereasonthatpeopledesigninflashisto havetheabilitytousetheseanimations,sothewebsitesthattheresearcherchoseforthe experimentwereheavyininteractivity,butstillwelldesigned.html5ontheotherhandis stillcapableofalotoftheinteractivitythatisallowedinflash,buttheresearcherfoundit hardertofindhtml5practicalwebsitesthathavebeenbuiltusinganimationheavily. Perhapsthisisanobservationthatcantellusthetrendsinwebdesignthat designersandusersprefer.html5isamorerecentdevelopment,andthedesignersthat designwithittendtouseanimationsmoresubtlydespitethefactthatitiscapable.manyof theseflashmadewebsitesshowcasedtheinteractivitytheywerecapableof.fromthe websitesgiven,mostoftheinterviewee scommentedontheinteractivityontheflash websitesstatingthatthesoundeffectsmayhavebeen toomuch and lotsofspinning,or thattheanimations gave(them)aheadache.althoughmostrespondedwiththatsame response,acouplefewoftheinterviewee sappreciatedthefactthattheflashinteractive websiteswerenontraditionalandfoundtheanimationsandsoundsentertaining. Mobile Capability 28

29 Mobileusewasalsooneofthequestionswheretheresultswereveryconsistant, andhtml5didhavethestronghandinthissituation.oneofthefirstthingstonoteisthat notallmobiledevicessupportflash.forthosewhodidnothaveaphonethatsupported flash,thewebsiteturnedintoplaintext,andthedesignwascompletelydismantled,making thewebsitealmostcompletelyunusable.outofthepeoplethatwereinterviewed,there wasaselectfewwhowereabletoviewtheflashwebsiteontheirphoneinandseeitinthe exactsamedesignthatwasontheweb.althoughthewebsiteremainedunchangedontheir smartphone,itwasobviouslynotdesignedtobeusedonamobiledeviceandnot controllable.eachoftheflashwebsiteswereconsideredunusable. TheHTML5websitesontheotherhanddidworkonthemobilephonessuccessfully. Somedesignersfailedtomaketheirwebsitesmobilefriendlywhichwasnotedbythe interviewees,butthosewhodidwerenoticedandapplaudedforconvenience.othersmade theappropriatechangestomaketheirwebsitecompletelymobilefriendlyasinthe interfaceanddesignwerechangedfortheuseonamobilephoneratherthanacomputer screen.theuseofbiggerbuttonsandasimplerinterfaceiswhathelpedmakethewebsite moremobilefriendly. Eachoftheintervieweeswereasked Howimportantisittoyouthatawebsitebe mobilefriendly,andwhy? Onascalefrom1 10,with10beingthehighest,the intervieweesratedtheimportancefromalevelof6to10,mostlyinthehigherrange.here isananswerfromalyssachow,a22yearoldandwhatherthoughtswereaboutthetopic. Duetotheheightenedaccessibilityofsmartphones,Ibelievethatitisimperative thatcompaniesinvestinr&dtoextendtheirwebsitessothattheyareuser friendly 29

30 onmobilephones.especiallywiththecurrenttechno generationthatweare,ithink thatpeoplearebeginningtoscrutinizethelayoutsandaccessibilityofwebsiteson theirphonestoagreaterdegreebecauseofthemanymobile friendlywebsitesthat areinexistencealready.forinstance,ifyouhadthechoicetoshoponline,you wouldbemuchmorelikelytoviewawebsitethatismobilefriendlythanonethatis notbecausetheefficiencyofthetimeyouspendonyourmobiledevicemakesit moredesirabletousethemobilefriendlywebsite.forthesakeofbusiness,itwould beprudentofcompaniestorecognizethatthemobile friendlinessoftheirwebsites couldbeabigfactorintheircontinued ordiscontinued success. Manyoftheotherpeoplewhowereaskedthesamequestionrespondedinthesame fashion,statingthat Iusemysmartphonemorethanmylaptopanditdefinitelyhelps havingawebsitethatismobilefriendly. Manyothersnotedthefactthatmobilephones anddeviceshavebecomemoreprevalentinsocietytoday,andwithsomanypeopleusing smartphonesnowitisimportantthatwebsitesbegearedtowardsthesemobileusersin ordertobesuccessful. Summary Throughtheuserspointofviewtheresearcherwasabletoidentifyseveralofthe trendsinwebdesignthatusersexpect.comparingeachofthedifferenttypesofwebsitesit wasapparentthatslowloadingspeedwasnotacceptable,interactivityandgooddesignis expected,andthatbeingabletousetheinternetonamobiledeviceisveryimportant.the researcherisabletodrawtheconclusionsfromtheseresultsthathtml5wastheusers pickforthissurvey. 30

31 Chapter 5 Conclusions Technologyisconstantlychanging,thatisagivenfact.Whatisoverlookedisthat technologyinallformsischanging,andforthisresearch,eachofthesechangesaffectone another.relianceonthewebisincreasingforallneeds,andthetechnologyweusetheweb onisgrowingrapidlyinbothsoftwareandhardware.thesizesofourscreenshavebecome smaller,andthecodinghasgrownmorecomplex.whatcomeswiththisgrowthismore options.everythingwewantcanbefulfilledwithafewlinesofcode.convenienceis literallyatourfingertipsandweareabletocontrolthewebthroughthemobiledevices thatwecarryonaregularbasis. HTML5isarecentdevelopmentfromthepastfewyearsthatisstillbeingdeveloped toturnintoanewindustrystandardofcreatingwebsites.thiscodehasthepowerto createinteractivewebsitesinasimplermanner,andperformmuchmoretasksthanits previousversionwascapableof.thequestiontobeansweredthroughthisresearchwasto determinewhetherthecapabilityofhtml5wouldeventuallyreplacetheseprogramsthat completethesetaskscurrently(asidefromhtml4whichisassumed),thisbeingadobe Flash. Afterconductingresearchandgatheringdatafromexperimentation,theresearcher hasfoundinformationtoanswertheprecedingquestion,butnotinayesornofashion. Itisevidentthatsocietytodaysimplyexpectsmore.Withnewtechnologies constantlycomingout,societyautomaticallyexpectsafewgivens.fastisneverfastenough, convenienceisamustbecausewealreadyhavesomuchdoneforsocietybytechnology 31

32 already,andgooddesigniswhatsocietyjudgeseachotherby.html5hashelpedtheweb designindustryfulfilltheseneedsandexpectations.html5provideseaseofuseforthe designerwithitssimpletags.itprovidestheoptiontoperforminteractivityandgood designthroughpurelycodecausingpagestoloadfaster.thecodeisalsorecognizedby mobiledevicesandcanbeadjustedtofitanysizescreeninagraphicallypleasingmanner. Allofwhichcanbeperformedwithoutanexternalplugin.Ontheotherhand,AdobeFlash hasbeenperformingthesetasksforthewebforthepastseveralyears.ithasprovideda placetowebdesignerstobeabletobemoreinnovativeandbringthewebtolifethrough animationandinteractivity. Throughresearchwehavefoundthatbothmethodsofdesigningforthewebhave theirdownsides.html5hasnotbeencompletelydevelopedandfoundsupportinall browsersisaproblemforthosewhoarenotuptodatewiththelatestinternetbrowsers. MobiledevicesdonotsupportFlashsothisisaproblemformobileuserswhoview websitesontheweb. Flashhasshownitscapabilityinthewebdesignindustryandyearsagoopeneda newlighttowebdesignandofferedanewwayoflookingattheweb.withtherecent developmentofhtml5,flashhasbeguntoloserelevanceinthisparticularindustry. HTML5isstillintheprocessofdevelopment,andtherestillbeingyearsbeforeitisfully acceptedthroughallbrowsersorthosewhouseolderbrowsersupdatethemselves,soit willnotbeabletocompletelyreplaceflashanytimesoon.flashpluginsarestillbeingused andareoneverycomputertoaidviewers.whatmaymakeflashbegintodeclineand slowlylosesupporttodayinthewebdesignindustryisitslackofsupportformobile devicesbecauseofhowmanypeoplerelyonthemobileweb. 32

33 HTML5hasproventhatitcanperformalotofwhatFlashwasmadetodoforthe webdesignindustry,soperhapsyes,maybeonedayhtml5mightreplaceflashintheweb designworld.thiswouldbeonlywhenhtml5hasbeencompletelysuccessfully developedandimplementedintoeverywebbrowserbeingused.keepinmindthatall thoughflashmaybedisappearingfortheweb,itwillsurelynotdisappearfromtheworld. Flashhasmanyotherpurposesoutsideofwebdesignincludinganimationandvideogame design,andwillbecontinuedtobeusedintheseotherindustries. 33

34 Appendix A List# List# Pleasepickonewebsitefromeachlistabove. Whichwebsitesdidyoupic? Take a moment to browse through the two websites that you chose. Do not be concerned with the content or company of the website, the purpose of this survey is for you to look around and get a feel for the interactivity, and design of the website. Please answer the following questions below pertaining to each. Explainyourexperiencewiththefollowingcategories.Pleasebespecificonyour experience. Navigation LoadingSpeed Design Interactivity Othernotes? 34

35 Which website did you prefer, and why? What are some things that you liked about these websites? What are some things that you didn t like about these websites? Please open each of the websites on your mobile phone. Didthewebsitesappearanydifferently?Listsomeobservations Doesitinterferewithyourusability? Onascaleof1 10(1beingtheleastimportant)howimportantisittoyouthatawebsitebe mobilefriendly?andwhy? 35

36 Appendix B 1. Howlonghaveyouworkedinthewebdesignindustry? 2. Whattypeofcustomersorcompaniesdoyoudesignfor? 3. Whatmethodandprogramsdoyouprimarilyusetobuildthewebsitesyoudesign? Pleasebespecific 4. Whatarethebenefitsofyourprimarymethodofwebdeveloping? 5. Whataresomeobstaclesthatyoumightfaceusingthismethod? 6. Whatdoyouthinkaresomekeyfactorstocreatinganeffectivewebsite? 7. Howdomobiledevicesortabletsaffectthewayyoudevelopyourwebsite? 8. DoyouhaveexperienceusingHTML5?WhatareyourthoughtsaboutHTML5? 9. Howdomobiledevicesortabletsaffectthewayyoudevelopyourwebsite? 10. DoyouhaveexperienceusingHTML5?WhatareyourthoughtsaboutHTML5? 11. DoyouhaveexperiencedevelopingwebsitesusingFlash?Thoughts? 12. DoyoubelievethatHTML5maysomedayreplaceFlashinthewebdesignindustry? Whyorwhynot? Interviewee s: KevinBlack CoutoSolutions,Web Developer WyethStiles InflightStudio,Interactive Producer KevinLuttrell NiteOwlStudio,Owner 36

37 References Boeri,R.(2011,December).WillHTML5EdgeOutFlash?.Econtent,34(10),39. Grensing Pophal,L.(2011).HTML5.Econtent,34(2),10 12 Jobs,S.(2010).ThoughtsonFlash(Applewebsite).Retrievedfrom on flash/ MarkW.,S.,&USA,T.(2011).AdobeendsdevelopmentofFlashformobiledevices. USA Today. Moren,D.(2012).AdobeCansMobileFlash.Macworld.29(2),26. Ozer,J.(2010).HerecomesHTML5 Shouldwecare?.Eventdv,23(4),48. Pachal,P.(2011).DoesAdobeEdgeSignaltheEndofFlash?.PC Magazine, 30(9),1 15. Schiller,S.(2012).IsFlashDeadYet?(Website).Retrievedfromhttp://isflashdeadyet.com/ Taft,D.K.(2011).AdobeCommitstobothFlashandHTML5.Eweek,28(17), WhatHTML5WillChange.(2010).Technology Review,113(6),