A presentation at Iceweb in in Reykjavík, Iceland by Drew McLellan
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 workflow. 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 specifications. 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 defining 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
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
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 find 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
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
&
&
&
&
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
6 REMEMBER: BROADBAND IS NOT A SILVER BULLET DIVERSION :)
DESIGNING FOR BROADBAND PUTS
EXTRA LOAD ON YOUR SERVERS
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
MISTAKES
GOING BACK AND FORTH COSTS TIME
NAME AND GROUP
PROVIDE FLAT VERSIONS OF EACH STATE FOR REFERENCE
HAND OVER A COLOUR GUIDE
EXPLAIN YOUR GRID
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
DON’T DESIGN
EACH SECTION
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
PLATFORMS
LOGGED IN
JAVASCRIPT ON OR OFF
FLASH
INSTALLED OR NOT
THERE ARE TWO OUTCOMES: TESTING GETS EXPENSIVE
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
Times are tough. With private companies and public organisations alike cutting back on spending, the budget for every project is trimmed down to the bone. From the cost of building sites, to maintaining them and even the funds required to keep them online, web designers and developers need to be increasingly creative to do a lot with a little.
It's sink or swim - we need to deliver more for the budget or risk losing projects (or our jobs) to more resourceful colleagues. But fear not! There are lots of simple, practical things we can all do to deliver more value to our customers. Drew McLellan will show you how to make the best use of limited design and development budgets in increasingly challenging economic times.
Here’s what was said about this presentation on social media.
