Cost Effective Web Development

10 COST EFFECTIVE WEB DEVELOPMENT TECHNIQUES

OR: HOW CAN I MAKE THE BEST USE OF LIMITED DESIGN AND DEVELOPMENT BUDGETS IN THESE INCREASINGLY CHALLENGING ECONOMIC TIMES? Most of you are building sites that cost your client more money than they should. You’re wasting money. Here’s how you can stop.

SOMEWHERE OUT THERE LIES A WORLD OF

LIMITLESS

BUDGETS Some people are building things without needing to worry about how much time it takes or what it costs. That’s not most of us. Most of us work with constrained budgets. Internal or external clients. Everyone has a limit on either the amount to TIME or the amount of MONEY

WHEN BUDGETS ARE TIGHT EVERYONE

WORKS

HARDER It’s no secret that we’re in a period of global recession. Clients either have smaller budgets, or want more from the same budget as before. Companies who employ web designers and developers have less work, which may mean they’re unable to support as many sta ! . Everyone has to work harder.

FA S T E R CHEAPER BETTER STRONGER WITH FEWER RESOURCES AVAILABLE What we build has to be done faster Spending less To higher standards because the market is more competative and has to last longer. All this will fewer people on your team, or less money to pay for the number of hours you may require as a freelancer. Today I’m going to be looking at some techniques that might help you to design and build faster, cheaper, better and stronger.

SOME TECHNIQUES ARE TECHNICAL BUT MANY ARE ABOUT WORKFLOW Some of those techniques are about the technology we put in place. A lot of what we do on the web is technical and by identifying the costs associate with technology we’re using we can make sure we’re as e " cient as possible. One of the biggest costs in building stu ! for the web is you and me. It’s people’s time. So a lot of the suggestions are about improving workﬂow. About thinking about our jobs in terms of e " ciency.

I’M DREW MCLELLAN EDGEOFMYSEAT.COM ~ @DREWM I HELP PEOPLE BUILD THINGS ON THE WEB I’m a web developer. I co-run a web development agency called edgeofmyseat.com We help people build things on the web. I’m @drewm on Twitter

HERE’S THE TIPS PRESENTED IN NO PARTICULAR ORDER So these are my tips, in no particular order. Yours may be di ! erent - I encourage you to share them. You might not agree - that’s ok! The important thing is that you think about how your can improve the way you spend your client’s budgets.

1 WRITE A COMPREHENSIVE SPECIFICATION FOR YOUR PROJECT WORKFLOW. When we’re talking about e " ciency in design and development, we need to talk about speciﬁcations. Most of us don’t like the concept of having to produce a spec It’s outside of our skills, often.

A GOOD SPEC DOES TWO THINGS LIMITS SCOPE

ENABLES EFFICIENCY But a good spec does two di ! erent things. It limits the scope of the project by deﬁning EXACTLY what the work is, up front. Most of us have to estimate either hours or costs for projects. Having a good description of each aspect of the project enables us to do that accurately. IT’S VITAL to get estimates right, and to:   ONLY DO THE WORK YOU ESTIMATED FOR When it comes to actually designing and building it enables you to be more e " cient. Questions answered up front Find common features and design/build once

&

THE EASIEST PLACE TO CONTROL COS T S

IS IN - THE SPEC If budgets are tight, the easiest place to control the costs is in the spec. When the spec is still being written and reﬁned, making changes, cutting back features, or juggling where time is best spent. When budget is limited, you need to make sure money is being spent where it matters. At the spec level, changes are almost free. Once you’ve started building, changes are expensive, and it’s money you can’t a ! ord to waste. So what should be in a spec?

DESCRIBE HOW THE SITE WORKS

FROM THE USER’S PERSPECTIVE NOT HOW IT’S IMPLEMENTED A good spec simply describes the site from a user’s point of view. What do they see? What can they do? A picture paints a thousand words, so include sketches of the interface. (where it matters) These aren’t designs. By thinking about what the user can see and do, you’re describing what needs to be designed and built. Include all users - such as sta ! admins, content editors, moderators as well as punters. This helps you make sure you’ve thought of everything, and time to design and build can be estimated accurately.

CHANGES ARE CHEAP TO M A K E ON PA P E R Don’t be afraid of changing the spec at this stage. Changes are cheap. Changes for the better save you money.

ENABLES EFFICIENCY! DEVELOPMENT

CAN BE - PLANNED UP FRONT Once you’re working to a ﬁnalised spec, it gives you a world-picture of the project. As a designer you might be designing something like a User Badge. With a spec you can look through and ﬁnd all places it’s used and make sure your design accommodates it. As a developer, you might be building something like a Pagination class. By having a spec up front, you can ﬁnd all items that need paging, and make sure your class is ﬂexible enough for all those uses. It enables you to be more e " cient.

NO - ALARMS
NO - SURPRISES It should basically mean that there are no surprises. Or at least the surprises are minor and easy to deal with. A spec enables you to make sure any additions can be correctly charged for. It helps you make sure that a job continues to be proﬁtable. That helps make sure you’re around to work on the next project.

2 EVALUATE POSSIBLE EXISTING SOLUTIONS TECHNICAL - particularly DEV

DON’T REINVENT

THE WHEEL There are unique projects - but for each one there’s 1000 that are fundamentally the same. Don’t be afraid of using technology you haven’t developed yourself. There are lots of web application frameworks There are lots of content management systems A lot of those are free Some of them are even good. Building on top of an existing platform can save masses of time.

EVALUATE AGAINST

YOUR (NOW SOLID) SPECIFICATION Don’t forget your spec. It’s a great help in evaluating a technical solution. It tells you what any chosen platform needs to be able to deliver.

CONSIDER COMPROMISES: WHERE DOES COST MATTER

MORE

THAN FEATURES? Perhaps you might ﬁnd a system that will allow you to deliver 90% of your project out of the box. MASSIVE SAVING. It’s a good time to re-evaluate the 10%. Is it an important 10%. Is the cost saving from changing the spec worth it? That will depend on your project. Massively.

USE EXISTING CODE AND BUILD 1 0% ON TOP

NOT -

1 0 0%

FROM NOTHING It’s always going to be more cost e " cient if you can then build that 10% yourselves Than to build 100% yourself from scratch.

3 CONSIDER THE COST OF YOUR DESIGN CHOICES MOSTLY TECHNICAL - DESIGN

TO U G H BUT NOT IMPOS SIBLE

IT JUST TAKES TIME

CONSIDER THE DEVELOPMENT

IMPLICATIONS OF EVERY SINGLE DESIGN CHOICE

4 MAKE SURE YOUR DESIGN COVERS ALL STATES THE USER ENCOUNTERS WORKFLOW - DESIGN

GOING

BACK & FORTH

COSTS TIME

CONSIDER - LOGGED IN LOGGED OUT

&

CONSIDER - EMPTY STATES TO O M U C H DATA

&

CONSIDER - WITH JAVASCRIPT WITHOUT

&

CONSIDER - ERRORS MESSAGES

&

MAKE SURE EVERYTHING IN THE SPEC IS

DESIGNED

5 DESIGN FOR REUSABILITY TECHNICAL - DESIGN

BUILD A TOOLKIT OF REUSABLE COMPONENTS

DESIGN TO A GRID

EVERY UNIQUE ELEMENT IS A SOURCE OF COST

A FEW - VERSATILE TEMPLATES IS BETTER THAN DOZENS

6 REMEMBER: BROADBAND IS NOT A SILVER BULLET DIVERSION :)

DESIGNING FOR BROADBAND PUTS

EXTRA LOAD ON YOUR SERVERS

BANDWIDTH IS - EXPENSIVE CONSIDER YOUR

RUNNING COSTS

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

FREE

7 PREPARE YOUR DESIGN FILES READY TO SEND ACROSS TO YOUR DEVELOPER WORKFLOW - DESIGN TO DEV

MAKE IT EASY FOR YOUR DEVELOPER

TO - GET IT RIGHT

MISTAKES

& - ADJUSTMENTS ARE EXPENSIVE

GOING BACK AND FORTH COSTS TIME

NAME AND GROUP

YOUR LAYERS -

PROVIDE FLAT VERSIONS OF EACH STATE FOR REFERENCE

HAND OVER A COLOUR GUIDE

EXPLAIN YOUR GRID

DEVELOPERS WILL LOVE YOU -

8 BUILD YOUR SITE FOR CHEAP MAINTENANCE TECHNICAL - DESIGN AND DEV

ONCE A SITE IS BUILT IT HAS TO BE MAINTAINED

CONTENT CHANGES STRUCTURE CHANGES USEAGE CHANGES

DESIGN & BUILD FOR FLEXIBILITY

AVOID - LABOUR-INTENSIVE TECHNIQUES SUCH AS TEXT AS IMAGES

DON’T DESIGN

EACH SECTION

IN A - DIFFERENT COLOUR

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

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

EVERY ELEMENT OF A SITE NEEDS TO BE TESTED

MULTIPLE - BROWSERS
MULTIPLE -

PLATFORMS

LOGGED IN

OR - LOGGED OUT

JAVASCRIPT ON OR OFF

FLASH

INSTALLED OR NOT

THERE ARE TWO OUTCOMES: TESTING GETS EXPENSIVE

OR - QUALITY SUFFERS

CONSIDER THE TESTING OVERHEAD OF EVERYTHING YOU ADD

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

THE WEB IS A COLLECTION OF SMALL PIECES LOOSELY JOINED

BE A SMALL PIECE

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

APIS

THE BEST WAY TO SAVE MONEY LET SOMEONE ELSE SPEND THEIRS

THANK YOU ANY QUESTIONS?

SLIDES ALLINTHEHEAD.COM/PRESENTATIONS FOLLOW ME: @DREWM