Website design and development: responsibilities and a useful handover
Website design and development describe connected work with different responsibilities. Design specifies the content, interactions and visual decisions; development implements how the site behaves and is maintained. A useful handover makes both the intended experience and its states testable. Team boundaries vary, so agree on responsibilities rather than relying on job titles.
The fictional workshop website has a session list and an enquiry form. We follow it from a brief to a working page. The point is to clarify the work before deciding which tool or programme will address your learning need.
Key ideas
- Define the visitor’s task before choosing a visual style.
- Include error, empty and loading states.
- Agree on responsibility for content and implementation.
- Test the published interaction as well as the mock-up.
Describe the experience the design must support
Identify the visitor’s question, the information they need and the action they can take. For the workshop, clarify prerequisites, session information and how an enquiry is submitted. Design decisions include hierarchy, readable text, responsive layout and meaningful controls. A screenshot can show the intended appearance but may not explain the full interaction. Write the decisions down so another person can understand what the visitor should be able to do.
Specify states before implementation
The form needs a normal state, missing-field feedback, a sending state and an understandable result. The session list may be empty or contain a long title. Include these cases in the handover, alongside narrow-screen behaviour and keyboard use. W3C’s accessibility materials and MDN’s learning resources provide relevant foundations. Do not leave every unusual state to the developer to invent, because those decisions change the experience just as much as the first screen does.
Agree on the boundary of each responsibility
Record who provides the text, creates assets, implements the form, manages the content and checks the release. Some people cover several roles; others work in specialised teams. A clear responsibility map prevents a phrase such as 'complete website design' from being read as hosting, integrations and ongoing maintenance when those were never discussed. Identify any technical constraint that changes the design and resolve it before the handover becomes a final mock-up.
Use acceptance checks tied to the task
On the working page, verify that the information is readable, controls can be operated and form states match the agreed behaviour. Try keyboard navigation, a narrow viewport, missing fields and a destination failure in an appropriate test environment. Inspect content structure and links too. Passing a visual comparison with a mock-up does not establish that an enquiry reached its destination. Keep a release note with checks completed and issues still open.
In everyday language
Design is the set of decisions about what the page should communicate and how someone uses it. Development makes those decisions operate in a real environment. The handover is where intentions become inspectable requirements, including the situations the first attractive screenshot does not show.
Try it yourself
Prepare a handover note for the workshop form. Describe its goal, required fields, four states, a narrow-screen rule and who owns the text, implementation and release check.
Expected result
A short specification that connects the visitor’s task to visible behaviour. A reviewer can test whether the implementation meets it without guessing what a screenshot implied.
Check your answer: The page matches the mock-up. Does that verify the form?
No. Test the interaction and destination as well as its appearance. Check required fields, feedback, keyboard use and the actual result. A matching picture does not establish that the underlying behaviour works.
Questions
Do I need to learn both design and development?
That depends on the work you want to perform independently and the people you collaborate with. Understanding the handover helps both roles, even when you specialise in one. Start with your project’s immediate obstacle and clarify prerequisites. This article explains responsibilities; it does not claim that one programme teaches every role or guarantees professional qualification.
Where does SEO fit into the handover?
Search intent and content structure influence what pages need to explain and how they connect. Technical implementation determines whether the resulting pages and links can be accessed as intended. Include useful titles, a clear main heading and relevant internal destinations in the specification. Search visibility then requires checking the published site and its content, not merely adding keywords to the mock-up.
Make content, states and responsibilities explicit. A clear handover gives both design and development a result they can test.
Sources and further reading
- MDN — Web development curriculum ↗Sources checked:
- W3C WAI — Accessibility curricula ↗Sources checked:
- Google Search Central — SEO starter guide ↗Sources checked: