A developer’s guide to iterative web builds
Have you heard of iterative development?
It’s the gold standard of modern software engineering and a core feature of the Agile methodology. Many agencies claim to work in this way, and it makes complete sense: Break your project down into chunks, work collaboratively with designers and test as you go. What could possibly go wrong?
But when you’re staring down the barrel of a major sprint with no clue as to what designs will land on your desk, the textbook guides to software development can be less than helpful.
So, as a developer, how can you harness the best of iterative working in a way that is practical for the real-world of publishing?
Iterative development in practice
In this article, I’ll share my honest experience of developing WordPress solutions for media organisations and reveal what it’s really like to work alongside a design agency. I’ll also provide tips for overcoming the biggest iterative development challenges. And I’ll show you my favourite tools for improving communication with clients.
How do we know that iterative development works?
Delivering project components in bite-sized increments is undoubtedly the most efficient way to build a digital publishing site. Work gets done faster, you get feedback and refine as you go. And if you get it wrong, you find out early enough to fix it without wasting a ton of clients’ money. This is how The Code Company has always worked.
Below are some examples of major digital publishing sites we developed using iterative techniques. Each of these projects had a unique brief, yet our approach was the same: Build an enterprise-grade WordPress site incrementally while collaborating with an external design agency.
Pedestrian.tv: Replatforming Australia’s largest youth publisher
Mumbrella Pro: Developing a major B2B digital subscription product
Boss Hunting: Developing Adtech and a new WordPress site for a leading men’s lifestyle publication
Nine: Building a new website for Australia’s largest media company
Overcoming the challenges of iterative web development
In theory, iterative development sounds simple. Yet, we’d be lying if we said it was without challenges. Here are some problems we regularly encounter – and tips for overcoming them.
Waiting for designs
We’ve all been there. You’re all set, ready to start work and then the design team fails to deliver on time. There’s nothing more frustrating.
We’ve learnt the hard way. Don’t start any project without the real and high-fidelity wireframe and layout. It’s too risky. Designers might assure you that the structure won’t change, but it can (and often does). It’s always better to wait for final designs than refactoring all your code.
Working with unknown entities
When we’re developing a site, we often have no clue what is coming next. The design team will typically supply one asset at a time, so that’s how we have to work. There’s no point in second guessing as that usually leads to additional work. When it comes to modular design, we try to share as many modules as possible with common CSS classes across them. Our approach is to create classes that are not assigned to a particular component. Instead, we base classes on utilities that can be used on many other modules and components.
Here’s an example of how to share styles that are not assigned to a particular component:
- Let’s imagine the component is named ‘Cards’.
- Inside each card I have some HTML tags: h2, p, span, etc.
- For each of those tags I added a style class that handles my styles/formatting, which means:
<h2 class="text--blue text-align--right text--uppercase">. - Then, inside a component named ‘Carousel’ I have the same HTML tags as Cards: h2, p, span, etc.
- but I added the same classes for the title, for example :
<h2 class="text--blue text-align--right text--uppercase">.
By doing this, I can share my styles across the components and also make my CSS files clean and tidy.
Avoiding excessive abstractions and conditionals
Start every project by making a solid plan and asking, “How can I avoid repeating the code too many times?” Don’t be afraid to change the way you conceptualise a component or module if required. However, there’s a fine line between avoiding repeating code and leading your code to excessive abstractions.
Here’s an example:
Imagine a block component that’s shared across all pages with the same styles. But then there’s a design change in two of the pages. What would you do?
My advice: Instead of making some logical conditions to deal with the changes, create a new block component for these two pages. Then you have two different block components. They are easy to maintain and easy for any other developer to pick how they were implemented. No crazy logicals, abstractions or conditionals required.
Changes in design direction
As projects progress, it’s not uncommon for clients to reconsider their business rules (programming logic). While this may be beneficial in the long term, wrestling a moving beast can prove challenging for developers! Adjusting the business rules involved in modules or components can change the entire way we tie the code and connect the front and back ends. That’s why having a strong briefing/scoping session is so important – as the next part of this article explores.
How to make the developer/designer relationship work better
Developing alongside a design team can be tricky. However, like most successful relationships, the secret is strong communication.
Scope, scope, scope!
While the very nature of Agile is to allow for change, the initial scoping phase remains the most important part of any development process. From the outset, it is crucial that the project’s objectives, opportunities, expectations and timelines are agreed on both sides. A thorough scoping session should highlight any business rule discrepancies to reduce the likelihood of mid-project pivots. This is also the time to set your inventory to ensure that all stakeholders are clear of their roles and responsibilities.
A clear design workflow
Once the project has been scoped with the design team, it’s time to build a workflow. Workflows make implementation of features easy because you know exactly what to do at every step. Some clients might attempt to skip or rush this phase, citing time pressures.
It’s worth reminding them that, with a workflow to follow, you’re far less likely to interrupt their week with constant questions and changes. A clear design workflow is also the safest way to reduce mistakes, unnecessary work, missed deadlines and additional costs.
What’s the best format for a website design workflow?
The format of your workflow will largely depend on the design agency you’re working with. Some agencies are big workflow fans, others are less enthusiastic. This guide unpacks the 5 stages of optimal design workflow. But as an absolute minimum, a workflow should include:
- User journey mapping: Who is the audience and how will they experience the site?
- Information architecture design: How will content be organised to provide the best UX?
- Content hierarchy: Which content needs to be prioritised and why?
- Responsive wireframing: How do all the elements work across multiple screen sizes?
READ MORE: Designing a publishing site? Here’s what you need to know:
Daily stand-ups and showcases
If you’re being truly Agile, daily stand-ups between key stakeholders are a given. We’re not talking major meetings, just a swift check-in. Comment on the task that you’re working on, chat though any issues, ask for help if you need it and get back to work.
Similarly, showcases (or sprint reviews) provide a valuable opportunity for development and design teams to present their work and gather feedback. This constant conversation goes a long way to keeping teams aligned and preventing roadblocks further down the track.
Pick your tools
For communication, we use Slack as it’s channel-based so it’s easy to stay organised. We typically connect with clients on Slack twice a week. A must-have tool for development is Sass. It enables you to do so much more than Native CSS, such as splitting CSS style into files and creating a nice folder structure.
To handle browser compatibility, for both CSS and javascript, we use webpack. This bundles all the CSS and JS assets, making the files browser compatible. It also reduces the size of the files (amongst many other features).
PHPCS (for PHP) and ESLINT are both very important to define coding standards. And we’re a big fans of VSCode (Code Editor).
Final thoughts on iterative development
While working iteratively will always present challenges, we’re convinced that it’s the best way to manage complex website builds. Just ensure your development team is well versed in ‘real world’ Agile processes and that your project kicks off with a strong scoping session and clear design workflow.
For us, the secret to successful web development always relies on three elements: good plans, good briefings and good processes.
Get these things right and your project won’t go far wrong.
