Web design

209 Pages·2012·34.851 MB·English

by  Hill, Josh, Brannan, James A

Web Design
Second Edition
• Easy to follow • Step-by-step tasks • In full colour
in Simple
Joe Kraynak
steps and James A. Brannan
Web Design
Pearson Education Limited
Edinburgh Gate
Harlow CM20 2JE
Tel: [phone]
Fax: [phone]
Website: www.pearson.com/uk
First edition published in 2010
Second edition published in Great Britain in 2012
© Joe Kraynak and James A. Brannan 2010, 2012
The rights of Joe Kraynak and James A. Brannan to be identified as authors of this work have been
asserted by them in accordance with the Copyright, Designs and Patents Act 1988.
Pearson Education is not responsible for the content of third-party internet sites.
ISBN: 978-0-273-77472-3
British Library Cataloguing-in-Publication Data
A catalogue record for this book is available from the British Library
Library of Congress Cataloging-in-Publication Data
A catalog record for this book is available from the Library of Congress
All rights reserved. No part of this publication may be reproduced, stored in a retrieval system,
or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or
otherwise, without either the prior written permission of the publisher or a licence permitting restricted
copying in the United Kingdom issued by the Copyright Licensing Agency Ltd, Saffron House, 6–10
Kirby Street, London EC1N 8TS. This book may not be lent, resold, hired out or otherwise disposed of
by way of trade in any form of binding or cover other than that in which it is published, without the
prior consent of the Publishers.
All trademarks used herein are the property of their respective owners. The use of any trademark in this
text does not vest in the author or publisher any trademark ownership rights in such trademarks, nor
does the use of such trademarks imply any affiliation with or endorsement of this book by such owners.
10 9 8 7 6 5 4 3 2 1
16 15 14 13 12
Typeset in 11/14 pt ITC Stone Sans by 3
Printed and bound in Great Britain by Scotprint Ltd, Haddington
Simple
in
steps
Web Design
Simple Second Edition
in
Joe Kraynak and
steps James A. Brannan
Use your computer with confi dence
Get to grips with pratical computing tasks with minimal time, fuss and bother.
In Simple Steps guides guarantee immediate results. They tell you everything you need
to know on a specifi c application; from the most essential task to master, to every
activity you’ll want to accomplish, through to solving the most common problems
you’ll encounter.
Helpful features:
To build your confi dence and help you get the most out of your computer, practical
hints, tips and shortcuts feature on every page:
AAALLLEEERRRTTT::: Explains and provides HHHOOOTTT TTTIIIPPP::: Time and effort
pprraaccttiiccaall ssoolluuttiioonnss ttoo tthhee mmoosstt ssaavviinngg sshhoorrttccuuttss
commonly encountered problems
SEE ALSO: Points you DDDIIIDDD YYYOOOUUU KKKNNNOOOWWW???
to other related tasks and AAAddddddiiitttiiiooonnnaaalll fffeeeaaatttuuurrreeesss tttooo eeexxxppplllooorrreee
information
WHAT DOES THIS MEAN?
Jargon and technical terms explained in plain English
Practical. Simple. Fast.
Simple
in
steps
Use your computer with confi dence Dedication:
For Lee Borup and Weber State University’s Veterans Upward Bound (VUB) Project. A
Get to grips with pratical computing tasks with minimal time, fuss and bother. chance encounter opened an entirely new world. Had we never met, I would never have
acquired an education or written this book.
In Simple Steps guides guarantee immediate results. They tell you everything you need
to know on a specifi c application; from the most essential task to master, to every Author acknowledgements:
activity you’ll want to accomplish, through to solving the most common problems
you’ll encounter. Thanks to the staff at Pearson, especially Rob Cottee and Steve Temblett. Also thanks
to Neil Salkind. Thanks to the many sites that graciously allowed me to use screenshots
from their sites. Special thanks to Everaldo and his open source Crystal Project icons,
Helpful features:
www.everaldo.com; these icons are beautiful and make my books much nicer.
To build your confi dence and help you get the most out of your computer, practical Publisher’s acknowledgements:
hints, tips and shortcuts feature on every page:
We are grateful to the following for permission to reproduce copyright material:
Screenshots on pp.2, 4, 7, 8, 9, 17, 23, 27, 29, 31, 34, 35, 36, 37, 45, 46, 49, 53, 55, 56, 59, 64,
65, 66, 76, 81, 86, 87, 88, 91, 93, 94, 98, 99, 100, 101, 105, 108, 118, 119, 120, 124, 125, 145,
ALERT: Explains and provides HOT TIP: Time and effort
146, 150, 157, 158, 162, 164, 165, 167, 192, 194 courtesy of James A. Brannan Associates PLLC;
practical solutions to the most saving shortcuts
screenshots on pp.3, 15, 41, 77, 176 from FreeCSStemplates.org; screenshots on pp.6, 8, 15, 43,
commonly encountered problems
52, 80, 184 from Directgov © Crown copyright; screenshots on pp.11, 162, 168, 172, 173, 185,
187 courtesy of Google, Inc; screenshots on pp.15, 137 from Flickr, reproduced with permission
of Yahoo! Inc © 2012 Yahoo! Inc. YAHOO!, the YAHOO! Logo, FLICKR and the FLICKR logo are
registered trademarks of Yahoo! Inc; screenshot on p.18 from Oxfam International, reproduced
SEE ALSO: Points you DID YOU KNOW? with permission of Oxfam GB, www.oxfam.org.uk. Oxfam GB does not necessarily endorse any
to other related tasks and Additional features to explore text or activities that accompany the materials; screenshots on pp.26, 54, 78 from Animenation;
information screenshots on p.40 from the Food Standards Agency; screenshot on p.48 from www.cultuer.
gov.uk, Department for Culture, Media and Sport (dcms) © Crown Copyright; screenshot on
p.51 from NHSDirectWales © Crown copyright; screenshot on p.60 from British Sky Broadcasting
Limited; screenshot on p.60 courtesy of JavaWorld; screenshot on p.60 courtesy of Studio B
Productions Inc.; screenshots on p.73 © WWF-UK; screenshots on p.79 from the Campaign
WHAT DOES THIS MEAN? Against Euro-Federalism; screenshots on p.80 from The Department of Health © Crown copyright;
screenshot on p.83 from SurvivalInternational.org; screenshots on pp.95, 96, 139, 141, 142, 178,
Jargon and technical terms explained in plain English
182, 192 from Adobe Systems, Inc; screenshot on p.110 courtesy of Xara Group Ltd.; screenshot
on p.136 from iStockphoto, Getty Images; screenshots on pp.171, 186 from SeoQuake, courtesy
of SeoQuake Team and SEMrush.com; screenshot on p. 83 design an coding by Nomensa,
content by Broads Authority; screenshot on p.84 from MadebySplendid.com; screenshots on
Practical. Simple. Fast.
pp.163, 189 from FinkShrink.com; screenshots on pp.193, 194 from Bluehost.
In some instances we have been unable to trace the owners of copyright material, and we
would appreciate any information that would enable us to do so.
in Simple in Simple
steps steps
Contents at a glance
● Make pages printable 75
Top 10 Web Design Tips
● Emphasise what is important 78
1 Planning your website ● Prominently display your purpose,
or have a tagline 79
● Determine your site’s purpose 17
5 Using web colour
● Identify your target audience 19
effectively
● Identify a service you can offer users 24
● Understand colour theory essentials 93
● Create a use case diagram 31
● Use your colour palette consistently
2 Website architecture across pages 98
● Choose colours to match your
● Follow the three-click rule 39 site’s mood 99
● Use sequential navigation when ● Accept that colour choices may
appropriate 41 not appear as you wish 100
● Always create a site map or site
index 51 6 Texture
● Create a website framework,
● Add texture with a repeating
complete with blank pages 55
pattern 105
3 Writing your text ● Add texture with a non-repeating
image 106
● Ensure your site contains quality ● Use drop-shadows to add depth 109
content 60
● Use opacity/transparency for an
● Chunk your information into interesting visual effect 112
bite-size pieces 61
● Write descriptive headings and 7 Web typography
subheadings 64
● Specify the desired font 116
● Ensure meaning is intuitive on
important items 70 ● Increase line height to make text
legible 120
4 Webpage layout and
● Left align text and headings in
composition
most situations 121
● Add sufficient padding around
● Place important information above
boxed text 127
the fold line 73
● Include audio on your webpages 154
8 Images
● Avoid Flash splash screens 158
● Choose the right file format: JPEG,
PNG, SVG or GIF 131 10 Testing your website
● Consider using a logo for brand
identity 133 ● Troubleshoot appearance issues 161
● Use only relevant images 135 ● Test using more than one browser 163
● Edit a photo before using it on a ● Test your site’s usability 164
webpage 141
● Evaluate your site’s effectiveness
in achieving its goals 167
9 Using multimedia
● Test your site’s speed 168
effectively
Top 10 Web Design
● Leverage the power of YouTube 149
Problems Solved
● Consider podcasting to deliver
your multimedia 152

Contents
Top 10 Web Design Tips
1 Use a content management system (CMS) 2
2 Provide a service 3
3 Do not get too clever 4
4 Usability is paramount 6
5 The Web is an easily changeable medium 7
6 Make text more accessible with plenty of headings,
subheadings and lists 8
7 Check your work 9
8 Be consistent 10
9 Leverage the power of free online web developer tools 11
10 Remember, web design is supposed to be fun 12
1 Planning your website
● Review several sites’ services and self-interested goals 15
● Determine your site’s purpose 17
● Narrow your purpose to one goal 18
● Identify your target audience 19
● Have a call to action 21
● Understand your constraints 23
● Identify a service you can offer users 24
● Make sure your ecommerce site offers a service 25
● When offering a service, make it relevant and valuable 27
● Gather requirements, even if you don’t think there are any 29
● Create a use case diagram 31