Download Responsive Design + Typography - ART 87

ResponsiveDesign+Typography
ClaudiaJacquesdeMoraesCardoso
WhatisResponsiveWebDesign?
•  Responsivewebdesignistheprac9ceofbuildingawebsite
suitabletoworkoneverydeviceandeveryscreensize,no
ma>erhowlargeorsmall,mobileordesktop.
•  Responsivewebdesignensuresthatwebsiteslookgood
onalldevices.
h>p://www.w3schools.com/css/css_responsive_intro.asp
WhatisResponsiveWebDesign?
•  ResponsivewebdesignisnotaprogramoraJavaScript.
•  Responsivewebdesignisamustformobiledevices.
•  Responsivewebdesignisfocusedaroundprovidingan
intui>veandgra>fyingexperienceforeveryone.
h>p://www.w3schools.com/css/css_responsive_intro.asp
Crea>ngaResponsiveWebDesign
•  CanbecreatedfromscratchusingHTML5+CSS+JS
•  Canbecreatedusinganalreadyexis>ngHTML5+CSS+JS
framework(Template).
h>p://www.w3schools.com/css/css_responsive_intro.asp
WhatAreFrameworks?
•  Aframeworkisastandardizedsetofconcepts,prac>ces
andcriteriafordealingwithacommontypeofproblem,
whichcanbeusedasareferencetohelpusapproachand
resolvenewproblemsofasimilarnature.
•  Inwebdesign,aframeworkisdefinedasapackagemade
upofastructureoffilesandfoldersofstandardizedcode
(HTML,CSS,JSdocumentsetc.)whichcanbeusedto
supportthedevelopmentofwebsites,
h>p://1stwebdesigner.com/responsive-website-tutorial/
Front-endFrameworks|CSSFrameworks
•  Frontendframeworksusuallyconsistofapackagemadeupof
astructureoffilesandfoldersofstandardizedcode(HTML,
CSS,JSdocumentsetc.)
•  Theusualcomponentsare:
•  CSSsourcecodetocreateagrid:thisallowsthedeveloper
toposi9onthedifferentelementsthatmakeupthesite
designinasimpleandversa9lefashion.
•  Typographystyledefini>onsforHTMLelements.
•  Solu>onsforcasesofbrowserincompa>bilitysothesite
displayscorrectlyinallbrowsers.
•  Crea>onofstandardCSSclasseswhichcanbeusedto
styleadvancedcomponentsoftheuserinterface.
h>p://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
TypesofFrameworks
Simpleframeworks
TheseareoUencalledsimply“gridsystems”butare
frameworksnonetheless.Theyofferstylesheetswithcolumn
systemstofacilitatethedistribu9onofdifferentelements
accordingtotheestablisheddesign.
Completeframeworks
Theyusuallyoffercompleteframeworkswithconfigurable
featureslikestyled-typography,setsofforms,buLons,icons
andotherreusablecomponentsbuilttoprovidenaviga>on,
alerts,popovers,andmore,imagesframes,HTMLtemplates,
customseXngs,etc.
TypesofFrameworks
Simpleframeworks
•  1140CSSGridfitsperfectlyintoa1280monitor.Onsmallermonitorsitbecomesfluidandadaptstothewidthofthe
browser.Beyondacertainpointitusesmediaqueriestoserveupamobileversion,whichessen9allystacksallthecolumnsontopofeach
othersotheflowofinforma9ons9llmakessense.Scrap1024!Designonceat1140for1280,andwithveryli>leextrawork,itwilladaptitself
toworkonjustaboutanymonitor,evenmobile.cssgrid.net
•  ResponsiveCSSGridbyDenisLeBlancSimpleCSSframeworkforfast,intui9ve
developmentofresponsivewebsites.Builtusingthe'MobileFirst'approach,'clearfix'forclearingfloats,box-sizing:border-boxforadding
addi9onalpaddingtoelements,andweighslessthen1kbcompressed.Responsivedesignisn'thard,you'vejustneverusedresponsive.gs.
•  LESSFramework4LessFrameworkisaCSSgridsystemfordesigningadap9veweb-sites.Itcontains4layoutsand3
setsoftypographypresets,allbasedonasinglegrid.lessframework.com
•  960GridSystemThe960GridSystemisanefforttostreamlinewebdevelopmentworkflowbyprovidingcommonly
useddimensions,basedonawidthof960pixels.Therearetwovariants:12and16columns,whichcanbeusedseparatelyorintandem.
960.gs
TypesofFrameworks
Completeframeworks
BootstrapSleekintui9ve,andpowerfulfront-endframeworkforfasterandeasierwebdevelopment.BuiltatTwi>erby@mdo
and@fat,Bootstrapu9lizesLESSCSS,iscompiledviaNode,andismanagedthroughGitHubtohelpnerdsdoawesomestuffontheweb.
twi>er.github.com/bootstrap
Founda9on3Anadvancedresponsivefront-endframework.Founda9on3isbuiltwithSass,apowerfulCSSpreprocessor,which
allowsustomuchmorequicklydevelopFounda9onitself—andgivesyounewtoolstoquicklycustomizeandbuildontopofFounda9on.
founda9on.zurb.com
SkeletonABeau9fulBoilerplateforResponsive,Mobile-FriendlyDevelopment.Skeletonisasmallcollec9onofCSSfilesthatcanhelpyou
rapidlydevelopsitesthatlookbeau9fulatanysize,beita17"laptopscreenoraniPhone.getskeleton.com
HowtochoosetherightFramework?
1.  Everysiteisdifferentandwillrequiredifferent
characteris9cs.Usingaverycompleteframeworkfora
singlepagesitemaygiveanadequateresult,butsurely
missesoutonmanyresources.
2.  Currentlytherearen’tmanysignificantdifferences:
they’reallverycompleteandeasytouse.
h>p://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
HowtochoosetherightFramework?
Whattokeepinmind:
•  Speedofinstalla9on:someareverysimpletoinstalland
startusing.Othersrequiremore9metoconfigure.
•  Easeofunderstanding:someareabitofapaintogetto
gripswith,complicated.Others,bycontrast,are
compara9velymorestraighqorward.
•  Op9ons:someframeworksaremorecomplexthanothers
andoffermoreconfigura9onop9ons,widgetsand
interfaceop9ons.Thesewillallowyoutodobe>erthings
withyoursite.
•  Integra9onwithothersystems.
•  Bestlong-termsupport:Somedigitalprojectslack
con9nuityin9meandupdatesandsupportservicesstop.
It’salwaysbe>ertooptforthosethatoffercon9nued
h>p://1stwebdesigner.com/responsive-website-tutorial/
AdvantagesandDisadvantagesofUsing
Frameworks
Advantages
Speedsupthemock-upprocess
Cleanand9dycode
Solu9onstocommonCSSproblems
Browsercompa9bility
Learngoodprac9ces
Havingasingleproceduretoresolvecommon
problemsmakesmaintainingvariousprojectsmore
straighqorward.
•  Helpfulincollabora9vework
•  Disadvantages
• 
• 
• 
• 
• 
• 
h>p://1stwebdesigner.com/responsive-website-tutorial/
AdvantagesandDisadvantagesofUsing
Frameworks
Disadvantages
• 
• 
• 
• 
Mixescontentandpresenta9on
UnusedcodeleUover
Slowerlearningcurve
Youdon’tlearntodoityourself
Isitadvisabletouseaframework?
Notnecessarily.Thedevelopermusttakethefinaldecision
onwhetherornottouseaframework.Thiswilldependon
severaloftheissueswe’velookedat.Frameworksarea
resourcethatcanbeextremelyusefulformanypeople,but
h>p://1stwebdesigner.com/responsive-website-tutorial/
Isitadvisabletouseaframework?
Notnecessarily.
Thedevelopermusttakethefinaldecisiononwhetherornot
touseaframework.Thiswilldependonseveraloftheissues
we’velookedat.
Frameworksarearesourcethatcanbeextremelyusefulfor
manypeople,butthatdoesn’tmeantheyarenecessarily
usefulforyou.
Nowyouknowwhattheyare,whichonesareoutthere,and
theadvantagesanddisadvantagesofusingthem.
h>p://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
ResponsiveTypography:9TopTips
ByCrea9veBloqStaffJuly19,2016Webdesign
Responsivewebdesignhaschangedthewaywe
thinkaboutpagestructure.Italsoneedsto
changethewaywethinkabouttype.
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572
h>p://www.crea9vebloq.com/rwd/expert-responsive-typography-9ps-101517572