Professional web design techniques and templates

697 Pages·2015·40.61 MB·English

by  Eccher, Clint

Professional
Web Design:
Techniques and
Templates,
Fifth Edition
Clint Eccher
Cengage Learning PTR
Australia•Brazil•Japan•Korea•Mexico•Singapore•Spain•UnitedKingdom•UnitedStates
ProfessionalWebDesign:Techniques ©2015CengageLearningPTR.
andTemplates,FifthEdition
CENGAGEandCENGAGELEARNINGareregisteredtrademarksofCengage
ClintEccher
Learning,Inc.,withintheUnitedStatesandcertainotherjurisdictions.
PublisherandGeneralManager, ALLRIGHTSRESERVED.Nopartofthisworkcoveredbythecopyright
CengageLearningPTR:StacyL.Hiquet hereinmaybereproduced,transmitted,stored,orusedinanyformorbyany
AssociateDirectorofMarketing: meansgraphic,electronic,ormechanical,includingbutnotlimitedto
SarahPanella photocopying,recording,scanning,digitizing,taping,Webdistribution,
informationnetworks,orinformationstorageandretrievalsystems,except
ManagerofEditorialServices:
aspermittedunderSection107or108ofthe1976UnitedStatesCopyright
HeatherTalbot
Act,withoutthepriorwrittenpermissionofthepublisher.
SeniorMarketingManager:
MarkHughes
Forproductinformationandtechnologyassistance,contactusat
ProductManager:HeatherHurley CengageLearningCustomer&SalesSupport,1-800-354-9706.
Project/CopyEditor:MartaJustak Forpermissiontousematerialfromthistextorproduct,submitall
TechnicalReviewer:EricHunley requestsonlineatcengage.com/permissions.
InteriorLayoutTech:MPSLimited Furtherpermissionsquestionscanbeemailedto
[email protected].
CoverDesigner:MikeTanamachi
Indexer:ValeriePerry
Proofreader:MichaelBeady Alltrademarksarethepropertyoftheirrespectiveowners.
Allimages©CengageLearningunlessotherwisenoted.
Coverimages:©ClintEccher
LibraryofCongressControlNumber:2014937100
ISBN-13:978-1-305-25752-8
ISBN-10:1-305-25752-9
eISBN-10: 1-305-25753-7
CengageLearningPTR
20ChannelCenterStreet
Boston,MA02210
USA
CengageLearningisaleadingproviderofcustomizedlearningsolutions
withofficelocationsaroundtheglobe,includingSingapore,theUnited
Kingdom,Australia,Mexico,Brazil,andJapan.Locateyourlocalofficeat:
international.cengage.com/region.
CengageLearningproductsarerepresentedinCanadabyNelson
Education,Ltd.
Foryourlifelonglearningsolutions,visitcengageptr.com.
Visitourcorporatewebsiteatcengage.com.
PrintedintheUnitedStatesofAmerica
1234567161514
Mikayla—Youareburstingwithcreativityandhavewisdom
and compassion beyond your years.
Lisa—I have never known such support from a non-family
member as I have from you. I am grateful and humbled to
have someone like you in my life.
Acknowledgments
—
Chelsea Miller You are truly an amazingly gifted photographer. Your work makes me
look good.
—
Nancy Eccher For all the photography that proves your father lives in you.
— ’
Daniel Yu To the guy who started me down the Web road so many years ago. Its hard
to believe this journey all started with the Lynx browser.
—
Mark Celano For being my Italian coding Yoda.
—
Heather Hurley To the acquisitions editor whose professionalism and follow-through
over all the years has made my writing as painless as possible.
—
Marta Justak For working with an author with no memory. I am grateful beyond words
for all the help you provided with this edition.
’ —
For all of A5designs clients over the years without you, none of this would have
occurred.
iv
About the Author
Clint Eccher (Fort Collins, CO) is an award-winning Web designer with more than 18
years of experience designing and developing professional websites. He is the owner of
A5design, a Web design company that not only subcontracts to various marketing, adver-
tising, and IT organizations, but also is commissioned by Fortune 500 companies, local
and national non-profit organizations, and small businesses for Web design and develop-
ment. In addition to authoring Professional Web Design: Techniques and Templates,
Fourth Edition, which has been published in five different languages, he also is the author
of Advanced Professional Web Design: Techniques and Templates.
v
Contents
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Chapter 1 Overview of Web Development Today. . . . . . . . . . . . . . . . . . . . . . . . . .1
DefiningWebDesign.................................................. 2
KnowingtheSevenRulesofWebDesign.................................. 5
UnderstandingThreeWeb-DesignPhilosophies............................. 7
UsabilityPhilosophy.................................................7
MultimediaPhilosophy..............................................12
MortisedPhilosophy................................................14
Summary........................................................... 16
Chapter 2 Designing for the Past, Present, and Future. . . . . . . . . . . . . . . . . . . . .17
FeelingBrowserPain ................................................. 17
IncorporatingUsageStatistics .......................................... 19
BranchingPages..................................................... 22
UnderstandingBandwidth............................................. 22
BuildingonPreviousDesignWeaknesses ................................. 25
IFramesandFrames ................................................26
ImageButtons.....................................................27
BackgroundImages ................................................29
UncontrolledColor.................................................34
UncompressedImages ..............................................34
Thumbnails.......................................................35
Summary........................................................... 38
vi
Contents vii
Chapter 3 Things to Consider Before Beginning . . . . . . . . . . . . . . . . . . . . . . . . . .39
UsingRequirements.................................................. 39
CollectingtheRequirements .........................................41
ObtainingFront-EndRequirements....................................43
CreatingaFlowchart ...............................................44
KnowingBandwidthRequirements....................................46
DecidingonResolution ............................................... 47
DesigningFixedVersusRelativeSites ..................................52
CreatingVersionsofaSitetoSatisfyDifferingResolutions.................55
DecidingonColorDepth............................................55
DesigningforScalability............................................... 57
UsingIncludeFiles .................................................58
CreatingaFlexibleDesign...........................................60
Summary........................................................... 62
Chapter 4 Enhancing Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
SimplifyingArchitecture............................................... 63
UseaConsistentNamingConvention..................................64
LimittheClicking ..................................................65
AvoidLinkingtheUserOutoftheSection..............................65
CreateCascadingArchitectureVersusFlatArchitecture....................66
CreatingLayout ..................................................... 68
ScrollingVersusNotScrolling.........................................68
PositioningContent ................................................69
DevelopingNavigation................................................ 70
CreatingConsistency ...............................................70
UsingTextforMenuItems...........................................72
DecidingWhethertoUseaHorizontalorVerticalStructure................72
AllowingEnoughWidth.............................................72
UnderstandingtheDifferentTypesofMenus ...........................73
DesigningforAccessibility............................................. 75
DesigningforContent ................................................ 75
Summary........................................................... 78
Chapter 5 Gathering Requirements and Creating a Comp . . . . . . . . . . . . . . . . . .79
GatheringandBasingaSiteonRequirements............................. 80
CreatingaCompfortheClient ......................................... 84
CreatingaSourceDirectory..........................................86
CollectingandDocumentingStockImages..............................88
SelectingColors ...................................................89
viii Contents
DecidingLayout ...................................................90
DevelopingLayers .................................................92
UsingMasks ......................................................94
ReceivingaDecisionontheChosenCompandMakingEdits ................. 95
Summary........................................................... 96
Chapter 6 What Is Needed to Build Mortised Sites. . . . . . . . . . . . . . . . . . . . . . . .97
UnderstandingtheConceptofMortisingImages........................... 98
UnderstandingXHTML............................................... 107
UsingaLimitedNumberofTags.....................................108
UnderstandingGraphics.............................................. 109
UnderstandingCSS.................................................. 110
UnderstandingCSSTerminology.....................................110
CSSUsedinThisBook..............................................111
Block-andLine-LevelTags............................................ 113
UnderstandingtheDocTypeDeclaration ..............................114
LinkingtoCSSStyleSheets .........................................114
IncludingPrintStyleSheets .........................................114
UnderstandingIncludeFiles........................................... 117
Summary.......................................................... 118
Chapter 7 Understanding Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
LearningaboutVectorandBitmapImages............................... 119
LearningaboutJPGs,PNGs,andGIFs ................................... 122
UsingPNGsandGIFs...............................................122
KnowingHowPNGandGIFCompressionWork.........................129
UsingJPGs.......................................................131
MisusingImageFormats.............................................. 137
UnderstandingGraphics/CompressionSoftware........................... 144
Summary.......................................................... 146
Chapter 8 Creating CSS Designs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147
TheBasicsofCSS-BasedDesignWorksVersusXHTMLTable-BasedDesign ..... 147
UnderstandingtheBoxModel......................................... 161
WhentoUseTables ................................................. 166
ValidatingCode .................................................... 166
TestingDesignsinVariousBrowsers .................................... 167
Summary.......................................................... 167
Contents ix
Chapter 9 Case Study: Low-Content CSS Design. . . . . . . . . . . . . . . . . . . . . . . . .169
UnderstandingtheDesign’sStructure................................... 169
TheReasoningBehindGuidesandCreatingSlicesinPhotoshopFiles .......170
UnderstandingthePlacementofCSSContainers........................174
BuildingtheStructure ............................................... 175
CreatingtheXHTMLandCSSFramework..............................175
AddingtheHeaderContent ........................................178
Adding<DIV>inWhichtoNestLeftandRightColumns..................182
CreatingtheLeftColumn...........................................183
AddingtheCenter(Right)Column ..................................... 190
ConstructingSecond-LevelPages....................................... 196
AddingaFloatingContainerforAdditionalContent.....................202
Summary.......................................................... 210
Chapter 10 Case Study: Medium-Content CSS Design . . . . . . . . . . . . . . . . . . . . .211
UnderstandingtheDesign’sStructure................................... 211
ReasoningBehindGuidesandCreatingSlicesinaPhotoshopFile ..........212
UnderstandingthePlacementofCSSContainers........................214
BuildingtheStructure ............................................... 216
CreatingtheXHTMLandCSSFramework..............................216
AddingtheLeftColumn............................................219
Adding<DIV>toNestCenterandInside-RightColumns..................224
AddingtheTop-RightImages .......................................226
AddingtheBottom,Center,andRightContentAreas....................233
ConstructingSecond-LevelPages....................................... 242
ConstructingaSecond-LevelPagewithThreeColumns...................242
ConstructingaSecond-LevelPagewithTwoColumns....................248
Summary.......................................................... 254
Chapter 11 Case Study: High-Content CSS Design . . . . . . . . . . . . . . . . . . . . . . . .255
UnderstandingtheDesign’sStructure................................... 255
ReasoningBehindGuidesandCreatingSlicesinPhotoshopFiles...........256
UnderstandingthePlacementofCSSContainers........................259
BuildingtheStructure ............................................... 261
CreatingtheXHTMLandCSSFramework..............................261
AddingtheHeaderRow............................................263
CreatingtheLeftColumn...........................................268
AddingtheCenterColumn .........................................274
ConstructingSecond-LevelPages....................................... 287
ConstructingaSecond-LevelPagewithThreeColumns...................287
ConstructingaSecond-LevelPagewithTwoColumns....................298
Summary.......................................................... 308