10 Cost Effective Web Development Techniques

A presentation at twiist.be in May 2009 in Leuven, Belgium by Drew McLellan

Slide 1

Slide 1

10 COST EFFECTIVE WEB DEVELOPMENT TECHNIQUES

Slide 2

Slide 2

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

Slide 3

Slide 3

I’M DREW MCLELLAN EDGEOFMYSEAT.COM ~ @DREWM I HELP PEOPLE BUILD THINGS ON THE WEB

Slide 4

Slide 4

SOMEWHERE OUT THERE LIES A WORLD OF

LIMITLESS

BUDGETS

Slide 5

Slide 5

WHEN BUDGETS ARE TIGHT EVERYONE

WORKS

HARDER

Slide 6

Slide 6

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

Slide 7

Slide 7

SOME TECHNIQUES ARE TECHNICAL BUT MANY ARE ABOUT WORKFLOW

Slide 8

Slide 8

HERE’S THE TIPS PRESENTED IN NO PARTICULAR ORDER

Slide 9

Slide 9

1 WRITE A COMPREHENSIVE SPECIFICATION FOR YOUR PROJECT

Slide 10

Slide 10

A GOOD SPEC DOES TWO THINGS LIMITS SCOPE

ENABLES EFFICIENCY

&

Slide 11

Slide 11

THE EASIEST PLACE TO CONTROL COS T S

  • IS IN - THE SPEC

Slide 12

Slide 12

DESCRIBE HOW THE SITE WORKS

FROM THE USER’S PERSPECTIVE NOT HOW IT’S IMPLEMENTED

Slide 13

Slide 13

CHANGES ARE CHEAP TO M A K E ON PA P E R

Slide 14

Slide 14

ENABLES EFFICIENCY! DEVELOPMENT

  • CAN BE - PLANNED UP FRONT

Slide 15

Slide 15

  • NO - ALARMS
  • NO - SURPRISES

Slide 16

Slide 16

2 EVALUATE POSSIBLE EXISTING SOLUTIONS

Slide 17

Slide 17

DON’T REINVENT

THE WHEEL

Slide 18

Slide 18

EVALUATE AGAINST

YOUR (NOW SOLID) SPECIFICATION

Slide 19

Slide 19

CONSIDER COMPROMISES: WHERE DOES COST MATTER

MORE

THAN FEATURES?

Slide 20

Slide 20

USE EXISTING CODE AND BUILD 1 0% ON TOP

  • NOT -

1 0 0%

FROM NOTHING

Slide 21

Slide 21

3 CONSIDER THE COST OF YOUR DESIGN CHOICES

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Slide 26

Slide 26

TO U G H BUT NOT IMPOS SIBLE

Slide 27

Slide 27

IT JUST TAKES TIME

Slide 28

Slide 28

Slide 29

Slide 29

Slide 30

Slide 30

Slide 31

Slide 31

CONSIDER THE DEVELOPMENT

IMPLICATIONS OF EVERY SINGLE DESIGN CHOICE

Slide 32

Slide 32

4 MAKE SURE YOUR DESIGN COVERS ALL STATES THE USER ENCOUNTERS

Slide 33

Slide 33

GOING

BACK & FORTH

COSTS TIME

Slide 34

Slide 34

  • CONSIDER - LOGGED IN LOGGED OUT

&

Slide 35

Slide 35

  • CONSIDER - EMPTY STATES TO O M U C H DATA

&

Slide 36

Slide 36

  • CONSIDER - WITH JAVASCRIPT WITHOUT

&

Slide 37

Slide 37

  • CONSIDER - ERRORS MESSAGES

&

Slide 38

Slide 38

MAKE SURE EVERYTHING IN THE SPEC IS

DESIGNED

Slide 39

Slide 39

5 DESIGN FOR REUSABILITY

Slide 40

Slide 40

BUILD A TOOLKIT OF REUSABLE COMPONENTS

Slide 41

Slide 41

DESIGN TO A GRID

Slide 42

Slide 42

EVERY UNIQUE ELEMENT IS A SOURCE OF COST

Slide 43

Slide 43

  • A FEW - VERSATILE TEMPLATES IS BETTER THAN DOZENS

Slide 44

Slide 44

Slide 45

Slide 45

6 REMEMBER: BROADBAND IS NOT A SILVER BULLET

Slide 46

Slide 46

Slide 47

Slide 47

DESIGNING FOR BROADBAND PUTS

EXTRA LOAD ON YOUR SERVERS

Slide 48

Slide 48

  • BANDWIDTH IS - EXPENSIVE CONSIDER YOUR

RUNNING COSTS

Slide 49

Slide 49

JUST BECAUSE IT’S DIGITAL DOESN’T MEAN IT’S

FREE

Slide 50

Slide 50

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

Slide 51

Slide 51

MAKE IT EASY FOR YOUR DEVELOPER

  • TO - GET IT RIGHT

Slide 52

Slide 52

MISTAKES

  • & - ADJUSTMENTS ARE EXPENSIVE

Slide 53

Slide 53

GOING BACK AND FORTH COSTS TIME

Slide 54

Slide 54

NAME AND GROUP

  • YOUR LAYERS -

Slide 55

Slide 55

PROVIDE FLAT VERSIONS OF EACH STATE FOR REFERENCE

Slide 56

Slide 56

HAND OVER A COLOUR GUIDE

Slide 57

Slide 57

EXPLAIN YOUR GRID

  • DEVELOPERS WILL LOVE YOU -

Slide 58

Slide 58

8 BUILD YOUR SITE FOR CHEAP MAINTENANCE

Slide 59

Slide 59

ONCE A SITE IS BUILT IT HAS TO BE MAINTAINED

Slide 60

Slide 60

CONTENT CHANGES STRUCTURE CHANGES USEAGE CHANGES

Slide 61

Slide 61

DESIGN & BUILD FOR FLEXIBILITY

Slide 62

Slide 62

  • AVOID - LABOUR-INTENSIVE TECHNIQUES SUCH AS TEXT AS IMAGES

Slide 63

Slide 63

DON’T DESIGN

EACH SECTION

  • IN A - DIFFERENT COLOUR

Slide 64

Slide 64

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

Slide 65

Slide 65

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

Slide 66

Slide 66

EVERY ELEMENT OF A SITE NEEDS TO BE TESTED

Slide 67

Slide 67

  • MULTIPLE - BROWSERS
  • MULTIPLE -

PLATFORMS

Slide 68

Slide 68

LOGGED IN

  • OR - LOGGED OUT

Slide 69

Slide 69

JAVASCRIPT ON OR OFF

Slide 70

Slide 70

FLASH

INSTALLED OR NOT

Slide 71

Slide 71

THERE ARE TWO OUTCOMES: TESTING GETS EXPENSIVE

  • OR - QUALITY SUFFERS

Slide 72

Slide 72

CONSIDER THE TESTING OVERHEAD OF EVERYTHING YOU ADD

Slide 73

Slide 73

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

Slide 74

Slide 74

THE WEB IS A COLLECTION OF SMALL PIECES LOOSELY JOINED

Slide 75

Slide 75

BE A SMALL PIECE

Slide 76

Slide 76

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

Slide 77

Slide 77

APIS

Slide 78

Slide 78

THE BEST WAY TO SAVE MONEY LET SOMEONE ELSE SPEND THEIRS

Slide 79

Slide 79

THANK YOU ANY QUESTIONS?

Slide 80

Slide 80

SLIDES ALLINTHEHEAD.COM/PRESENTATIONS FOLLOW ME: @DREWM