Web design decides how a website looks and how people move through it, and web development writes the code that makes it work; a business website needs both done to the standards Google, its buyers and AI search engines read it by. This guide explains the difference between the two jobs, what Google needs from a website build, a seven-step build process, accessibility, speed and security, the advice that no longer holds and how a well-built site earns citations in AI answers.
See how Aemorph's technical SEO works
Originally published 26 April 2024 in the website section of aemorph.com. Updated October 2026.
What Is Web Design and Development?
Web design is the planning of a website's layout, navigation, type and colour around the people who use it, and web development is the HTML, CSS, JavaScript and server code that turns that plan into working pages. A designer answers what each page shows and in what order. A developer answers how the page loads, stores data, takes payments and stays secure. A website that ranks and sells has both decisions made with search in mind from the first wireframe, because changes after launch cost more than choices made before it. Aemorph's guide to conversion rate optimisation covers measuring and raising the share of visits that become enquiries.
What are the types of web development?
Web development splits into front-end work that runs in the browser, back-end work that runs on the server and platform work that sits on a content management system or an ecommerce engine.
| Type | What it covers | Main technologies | Search concern | Who usually owns it |
|---|---|---|---|---|
| Front-end development | Everything the visitor sees and clicks | HTML, CSS, JavaScript | Content and links visible in the rendered HTML | Front-end developer |
| Back-end development | Servers, databases, logins and integrations | Server languages, databases, APIs | Status codes, redirects and response speed | Back-end developer |
| Full-stack development | Both layers on one project | Front-end and back-end together | One owner for crawl, render and speed issues | Full-stack developer |
| CMS development | Templates and editing tools for non-technical staff | WordPress, Sitecore and similar systems | Titles, headings and metadata editable per page | CMS developer |
| Ecommerce development | Catalogues, carts, checkout and payments | Ecommerce platforms and payment gateways | Category structure, duplicate pages and product data | Ecommerce developer |
The five common types of web development and the search question each one raises.
What Does Google Need From a Website Build?
Google indexes the mobile version of a website, discovers pages through standard HTML links and ranks with signals that include page experience, so a build passes when its mobile pages carry the full content, its links are crawlable and its pages load fast and securely. Google states that it uses the mobile version of a site's content, crawled with its smartphone agent, for indexing and ranking. It processes JavaScript in three phases, crawling, rendering and indexing, and finds links only when they are <a> elements with an href attribute.
| Requirement | What Google documents | How the build meets it | What breaks it | Where to check |
|---|---|---|---|---|
| Mobile-first indexing | The mobile version of the content is indexed and ranked | Same content, headings and structured data on mobile and desktop | Content hidden or cut from the mobile layout | Search Console URL Inspection |
| Crawlable links | Links are found when they are <a> elements with an href | Navigation and internal links written as standard HTML links | Links that only work through JavaScript click events | Rendered HTML of each template |
| JavaScript rendering | Pages are crawled, rendered, then indexed | Server-side rendering or pre-rendering for key content | Key content missing from the rendered HTML Google sees, through blocked scripts, rendering errors or loading only after a click | Search Console URL Inspection |
| Secure pages | Page experience asks whether pages are served securely | HTTPS on every page, with redirects from HTTP | Mixed content and expired certificates | Browser security panel |
| Page experience | Core Web Vitals are used by Google's ranking systems | Fast templates, stable layouts, light scripts | Heavy pages, layout shifts, slow responses | Search Console Core Web Vitals report |
What Google's documentation asks of a website build.
Sources: Google Search Central, October 2026 and others
Does responsive design matter for SEO?
Google recommends responsive web design, one set of URLs whose layout adapts to the screen, because it is the easiest pattern to build and maintain and it gives the mobile and desktop versions the same content. Separate mobile sites and dynamic serving still work, but each one adds a second version that has to match the first. Google asks that the mobile site contains the same content as the desktop site, so a responsive build removes the most common gap at the source.
How Do You Plan and Build a Website, Step by Step?
A website build that holds its search traffic runs in seven steps, from the buyer's questions to a verified launch, with the search requirements written in before the design starts.
- List the buyer's questions. Sales calls, enquiries and search data show what buyers ask before they act. Each question becomes a page or a section.
- Plan the structure and URLs. Group the questions into sections, give each page one short readable URL and keep every important page within a few clicks of the homepage.
- Write the content before the design. Layouts built around real copy keep headings, tables and calls to action in place; layouts built around placeholder text hide content on small screens.
- Wireframe on a phone first. Google indexes the mobile version, so the mobile layout decides what Google reads. Aemorph's guide to mobile SEO covers mobile-first indexing and the checks a phone layout needs.
- Build with search in the templates. Each template carries editable titles, meta descriptions, one H1, standard HTML links, image alt text and structured data that matches the visible text.
- Test before launch. Check the rendered HTML, Core Web Vitals, contrast and keyboard access on a staging copy, and fix what fails before the public sees it.
- Launch with redirects and verify. Redirect every old URL to its closest new page, submit the XML sitemap and check Search Console for errors in the weeks after launch. Aemorph's guide to 404 errors sets out which status code or redirect each missing page needs.
How do you redesign a website without losing rankings?
A redesign that changes URLs is a site move, and Google's guidance is to use permanent server-side redirects from each old URL to its new one, keep them for at least a year and expect temporary ranking changes while Google processes the move. The work starts weeks before launch with a full list of current URLs, the pages that hold links and traffic, and a map from each one to its replacement. Aemorph specifies that redirect map and the on-page set-up for your developers or IT vendor, then verifies the result before and after launch.
Source: Google Search Central, August 2026
What Makes a Website Accessible?
An accessible website is one people with disabilities perceive, operate and understand with the tools they use, and the international standard for it is the W3C's Web Content Accessibility Guidelines, WCAG 2.2, a W3C Recommendation since 5 October 2023. WCAG 2.2 adds nine success criteria to WCAG 2.1 and groups every requirement under four principles, covering how content is perceived, operated, understood and read by assistive technologies. Level AA is the level most organisations and laws point to.
| Requirement | WCAG reference | What it asks | How the build meets it | Search side effect |
|---|---|---|---|---|
| Text contrast | 1.4.3 Contrast (Minimum), Level AA | At least 4.5:1 for body text, 3:1 for large text | Colour tokens checked before the design is signed off | Readable snippets of text Google extracts |
| Text alternatives | 1.1.1 Non-text Content, Level A | A text alternative for every meaningful image | Descriptive alt text written per image | Google Images reads alt text |
| Keyboard access | 2.1.1 Keyboard, Level A | Every function works from a keyboard | Standard HTML buttons, links and forms | Standard links are also crawlable |
| Headings and structure | 1.3.1 Info and Relationships, Level A | Structure conveyed in the markup | One H1, then H2 and H3 in order | Clear sections for snippets and AI answers |
| Focus visible | 2.4.7 Focus Visible, Level AA | The keyboard focus is visible | A visible focus style on every control | No direct effect |
Five WCAG 2.2 requirements every website build carries.
Sources: W3C, October 2023 and others
How Fast and Secure Does a Website Need to Be?
Google's published targets for a good page experience are a Largest Contentful Paint within 2.5 seconds, an Interaction to Next Paint of 200 milliseconds or less and a Cumulative Layout Shift of 0.1 or less, measured at the 75th percentile of page loads on mobile and desktop. Google uses Core Web Vitals in its ranking systems, and it adds that good scores alone do not guarantee a top ranking. Its page experience questions also ask whether pages are served securely, display well on mobile, avoid intrusive interstitials and keep the main content distinct from everything else.
| Metric | What it measures | Good threshold | Common cause of a poor score | Fix in the build |
|---|---|---|---|---|
| Largest Contentful Paint (LCP) | Loading of the main content | Within 2.5 seconds | Large hero images, slow server response | Compressed images, caching, a fast host |
| Interaction to Next Paint (INP) | Response to clicks, taps and key presses | 200 milliseconds or less | Heavy JavaScript and third-party scripts | Less script, split long tasks |
| Cumulative Layout Shift (CLS) | Visual stability while the page loads | 0.1 or less | Images and ads without reserved space | Width and height set on every image and slot |
Core Web Vitals thresholds, measured at the 75th percentile of page loads.
Sources: web.dev, October 2024 and others
Does a website still need an SSL certificate?
A website needs HTTPS, which today runs on Transport Layer Security (TLS); the older SSL protocol is retired, and the IETF deprecated SSL 3.0 in June 2015 as not sufficiently secure. Certificate sellers still use the name "SSL certificate" for the TLS certificates sites install. What matters for buyers and for Google is that every page loads over HTTPS, that HTTP addresses redirect to it and that the certificate renews before it expires.
Which Web Design Advice Is Out of Date?
Several website rules still repeated online, including parts of the earlier versions of this page, describe tools Google has retired or claims no primary source supports. The table corrects each one against Google's documentation, the IETF or Aemorph's current service list.
| Earlier advice | What the documentation says | Source | What to do instead | Status |
|---|---|---|---|---|
| Secure the site with "SSL certifications" | SSL 3.0 is deprecated as not sufficiently secure; HTTPS runs on TLS | IETF RFC 7568, June 2015 | Serve every page over HTTPS with a current TLS certificate | Corrected |
| Run Google's Mobile-Friendly Test | Google retired the Mobile-Friendly Test in December 2023 | Google Search Central | Check that the mobile version carries the same content as desktop | Corrected |
| A few seconds of delay raises bounce rates and loses revenue | No primary source was given; Google publishes Core Web Vitals thresholds instead | web.dev, Web Vitals | Meet the LCP, INP and CLS thresholds at the 75th percentile | Removed |
| Work on keyword density and distribution | Google treats keyword stuffing as spam and relates pages to queries through language matching | Google SEO Starter Guide | Write naturally and answer the whole question | Removed |
| The top result takes about 33% of organic traffic | No primary source was given | None found | Judge pages on your own Search Console data | Removed |
| Aemorph web design prices and maintenance plans | Aemorph no longer builds or maintains websites | Aemorph service list, October 2026 | Brief your web developer with the requirements on this page | Removed |
Advice from the 2024 versions of this guide and the earlier website services page, checked against current documentation in October 2026.
Sources: IETF, June 2015 and others
How Does a Website Get Cited in AI Answers?
A website that Google indexes and shows with a snippet is eligible to appear as a supporting link in AI Overviews and AI Mode, and Google states that no extra technical work is needed beyond the same SEO fundamentals. Those fundamentals include crawlable internal links, important content in text form and structured data that matches the visible text, so a well-built website covers most of the technical side. AI chats such as ChatGPT, Claude, Gemini and Perplexity also cite pages that state facts plainly and source them. GEO is the work of earning those citations, and AEO covers Google's answer surfaces.
Source: Google Search Central, October 2026
Where does Aemorph fit in a website project?
Aemorph does not design or build websites; it writes the search requirements, the redirect map and the on-page set-up that your developers or IT vendor implement, then verifies the result before and after launch. For paid search campaigns, Aemorph builds dedicated landing pages itself, so campaigns launch and change without waiting on a website release. The technical SEO service covers audits and migrations, and the SEM service covers campaign landing pages.
Case study · Healthtech, Singapore
A 4,000+ page move to Sitecore, followed by 245% organic growth.
The migration project ran from March to August 2023, and the new Synapxe.sg launched on Sitecore in July 2023. Aemorph planned the move, specified the redirects and on-page set-up, and verified the result after launch. Monthly organic visits went from 6,372 in August 2023, the first month tracked after launch, to 21,953 in March 2024, up 245%. Read the Synapxe case study
Organic search result, not an AI citation.
Build a Website That Ranks, Converts and Gets Cited
A website earns search traffic when its design starts from buyers' questions, its code lets Google crawl and render every page, and it meets the accessibility, speed and security standards Google and WCAG publish. Plan the structure before the design, write content before the layout, build search into every template, test before launch and redirect every old URL when anything moves. Aemorph writes those requirements for your developers, verifies the build and then tracks how the site ranks in Google and where AI chats cite it. Aemorph's guides to how search engines work and SEO copywriting explain how Google crawls, renders, indexes and ranks pages, and how to write page copy that ranks and persuades.