Understanding_Responsive_Design

《Understanding_Responsive_Design》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、UnderstandingResponsiveWebDesign(RWD)&EnvironmentAwareComponentDesignVersion:2013.11.21ContentsContentsChecklistPlanningResponsiveWebDesignOverviewWhatisresponsivedesign?Whenshouldresponsivedesignbeconsidered?ArchitecturalStrategiesKeyIngredientsofResponsiveDesi

2、gnPrescriptivevs.ResponsivedesignDeterminingMajorBreakpointsCostreductionstrategiesforresponsivewebdesignBeyondResponsiveDesignEnvironmentAwarenessEnvironment-awareConditionalLoadingDevice-AwarenessandFeatureDetectionIBMWorklightFeaturesforEnvironmentOptimizatio

3、nEnvironmentOptimizationSkinCopyright©2013InternationalBusinessMachines.Allrightsreserved.ChecklistPlanning❏Makesuretoincludedesign,developmentandtestworkitemsforappsthatneedtooperateinmorethanoneorientation.❏Useresponsivedesignearlyintheprojectlifecycle.Tryingt

4、oretrofitresponsivetechniqueslateinaprojectisveryexpensive.❏Defineacostreductionstrategyandplanforminimizingcostsduetosupportingmultipledevices,operatingsystems.❏Startwithsmallformfactorscreendesigns,andworkoutwardtowardlargerformfactors—thisis“mobile-first”resp

5、onsivedesign.Startingwithlargeformfactorsandgoingtheotherdirectionincurslargerefactoringcosts.❏Donotwaterfallthedesignprocess–responsivedesignrequiresdesigneranddevelopercollaboration.❏Determineyourbreakpointsearlyintheproject❏Whendeterminingsupportedbreakpoints

6、,makesuretoconsiderverticalbreakpointsinadditiontohorizontalbreakpoints.❏MakesuretodesignfororientationchangesCopyright©2013InternationalBusinessMachines.Allrightsreserved.ResponsiveWebDesignOverviewWhatisresponsivedesign?Itisanessentialtechniqueforadjustingappl

7、icationcontenttothewidevariationsinscreensizesanddifferentorientations.Figure1●Minimumscreenresolutioncauseclippedviewport●Devicesbecomingsmallerandlargersimultaneously○Small:Mobiledevices,smartphones○Large:WebgetsintoGameConsole,TV○Somewhereinbetween:Tablet●Wea

8、redesigningformore:○Devices○Inputtypes○Resolutions○Orientations●Reducedevelopmentcosts●30%~50%lesscoding(ascomparedtopixelperfectapproaches)Copyright©2013Internationa