10 simple technical and workflow-based tips for reducing web design and development project costs. Presented by Drew McLellan from edgeofmyseat.com at twiist.be, Belgium, on 15 May 2009.

1. 10
COST EFFECTIVE
WEB DEVELOPMENT
TECHNIQUES

2. OR:
HOW CAN I MAKE
THE BEST USE OF LIMITED
DESIGN AND DEVELOPMENT
BUDGETS IN THESE
INCREASINGLY CHALLENGING
ECONOMIC TIMES?

3. I’M
DREW MCLELLAN
E D G E O F M Y S E A T. C O M ~ @ D R E W M
I HELP PEOPLE BUILD
THINGS ON THE WEB

4. SOMEWHERE OUT THERE LIES
A WORLD OF
LIMITLESS
BUDGETS

5. WHEN BUDGETS ARE TIGHT
E V E R YO N E
WORK S
HARDER

6. FA S T E R
CHEAPER
BETTER
STRONGER
WITH FEWER RESOURCES AVAILABLE

7. SOME TECHNIQUES ARE
TECHNICAL
BUT MANY ARE ABOUT
WORKFLOW

8. HERE’S THE
TIPS
PRESENTED IN NO PARTICULAR ORDER

9. 1
WRITE A COMPREHENSIVE
SPECIFICATION
FOR YOUR PROJECT

10. &
A GOOD SPEC DOES TWO THINGS
LIMITS
SCOPE
ENABLES
EFFICIENCY

11. T H E E A S I E S T P L A C E TO
CONTROL
COSTS - IS IN -
THE SPEC

12. DESCRIBE HOW THE SITE WORKS
FROM THE USER’S
PERSPECTIVE
NOT HOW IT’S IMPLEMENTED

13. CHANGES ARE
CHEAP
TO MAKE ON
PAPER

14. ENABLES EFFICIENCY!
DEVELOPMENT
- CAN BE -
PLANNED
UP FRONT

15. - NO -
ALARMS
- NO -
SURPRISES

16. 2
EVALUATE POSSIBLE
EXISTING SOLUTIONS

17. DON’T
REINVENT
THE WHEEL

18. EVALUATE AGAINST
YO U R ( N OW S O L I D )
SPECIFICATION

19. CONSIDER COMPROMISES:
WHERE DOES COST MATTER
MORE
THAN FEATURES?

20. USE EXISTING CODE AND BUILD
10% ON TOP
- NOT -
100%
FROM NOTHING

21. 3
CONSIDER THE COST OF YOUR
DESIGN CHOICES

26. TO U G H
BU T N OT
IMPOS
SIBLE

27. I T J U S T TA K E S
TIME

31. C O N S I D E R T H E
DEVELOPMENT
IMPLICATIONS
OF EVERY SINGLE
DESIGN CHOICE

32. 4
MAKE SURE YOUR DESIGN
COVERS ALL STATES
THE USER ENCOUNTERS

33. GOING
BACK & FORTH
COSTS
TIME

34. &
- CONSIDER -
LOGGED IN
LOGGED OUT

35. &
- CONSIDER -
EMPTY STATES
TOO MUCH DATA

36. &
- CONSIDER -
WITH JAVASCRIPT
WITH OU T

37. &
- CONSIDER -
ERRORS
M ESSAG E S

38. MAKE SURE
EVERYTHING
IN THE SPEC IS
DESIGNED

39. 5
DESIGN FOR
REUSABILITY

40. BUILD A TOOLKIT OF
REUSABLE
COMPONENTS

41. DESIGN TO A
GRID

42. EVERY
UNIQUE ELEMENT
IS A
SOURCE OF COST

43. - A FEW -
VERSATILE
TEMPLATES
IS BETTER THAN
DOZENS

45. 6
REMEMBER: BROADBAND IS
NOT A SILVER BULLET

47. D E S I G N I N G F O R B R OA D BA N D P U T S
EXTRA LOAD
ON YOUR SERVERS

48. - BANDWIDTH IS -
EXPENSIVE
CONSIDER YOUR
RUNNING COSTS

49. JUST BECAUSE IT’S
DIGITAL
DOESN’T MEAN IT’S
FREE

50. 7
PREPARE YOUR DESIGN FILES
READY TO SEND
ACROSS TO YOUR DEVELOPER

51. MAKE IT EASY
FOR YOUR DEVELOPER
- TO -
GET IT RIGHT

52. MISTAKES
-&-
ADJUSTMENTS
ARE EXPENSIVE

53. GOING BACK AND FORTH
COSTS TIME

54. NAME AND GROUP
- YOUR LAYERS -

55. PROVIDE FLAT VERSIONS
OF EACH STATE FOR REFERENCE

56. HAND OVER A
COLOUR
GUIDE

57. EXPLAIN YOUR GRID
- DEVELOPERS WILL LOVE YOU -

58. 8
BUILD YOUR SITE FOR
CHEAP MAINTENANCE

59. ONCE A SITE IS BUILT IT HAS TO BE
MAINTAINED

60. CON T E N T
CHANGES
STRUCTURE
CHANGES
U S E A G E
CHANGES

61. DESIGN & BUILD FOR
FLEXIBILITY

62. - AVOID -
LABOUR-INTENSIVE
TECHNIQUES
SUCH AS TEXT AS IMAGES

63. DON’T DESIGN
EACH SECTION
- IN A -
DIFFERENT COLOUR

64. CONSIDER HOW EACH ELEMENT
RESPONDS TO CHANGE
AND THE TIME IT WILL TAKE
TO ADAPT IT

65. 9
BUILD YOUR SITE FOR LOW COST
QUALITY ASSURANCE
(THAT’S TESTING!)

66. EVERY ELEMENT OF A SITE
NEEDS TO BE TESTED

67. - MULTIPLE -
BROWSERS
- MULTIPLE -
PLATFORMS

68. LOGGED IN
- OR -
LOGGED OUT

69. JAVASCRIPT
ON OR OFF

70. FLASH
INSTALLED OR NOT

71. THERE ARE TWO OUTCOMES:
TESTING GETS EXPENSIVE
- OR -
QUALITY SUFFERS

72. CONSIDER THE
TESTING OVERHEAD
OF EVERYTHING YOU ADD

73. 10
BUILD ON THE SHOULDERS OF GIANTS
USE EXISTING APIS
OUTSOURCE AS MUCH AS POSSIBLE

74. THE WEB IS A COLLECTION OF
SMALL PIECES
LOOSELY JOINED

75. BE A SMALL PIECE

76. AMAZON S3
FEEDBURNER
YOUTUBE / VIMEO
FLICKR
GOOGLE MAPS
YAHOO! SEARCH

77. APIS

78. THE BEST WAY
TO SAVE MONEY
LET SOMEONE ELSE
SPEND THEIRS

79. THANK YOU
ANY QUESTIONS?

80. SLIDES
ALLINTHEHEAD.COM/PRESENTATIONS
FOLLOW ME: @DREWM