Web design is the planning, layout and maintenance of websites. It covers the visual graphics, the user interface (UI), the user experience (UX) and the front-end code, which is the part of a site that visitors see. Designers write HyperText Markup Language (HTML) and Cascading Style Sheets (CSS) and check accessibility and search engine optimization (SEO) during the work.
History of Web design
Creator: No single creator. Tim Berners-Lee (World Wide Web), Marc Andreessen and Eric Bina (Mosaic browser). Year: 1991.
Web design uses graphic design, user experience and multimedia arts. The World Wide Web was announced on 6 August 1991. CERN was the first website to go live. That came in November 1992. Early pages used the HTML table tag for layout. Designers had no other way to place content.
In 1993 Marc Andreessen and Eric Bina made the Mosaic browser. It showed pictures and graphic parts. Earlier browsers showed mainly text. The W3C, or World Wide Web Consortium, was set up in October 1994. It set out to make common protocols for the web. In 1994 Andreessen formed Mosaic Communications Corporation. Later it was called Netscape Communications.
The W3C put out Cascading Style Sheets (CSS) in December 1996. CSS controls look and layout. Before CSS, designers built multi-column layouts with tables. They also used blank spacer images. Flash, first called FutureSplash, was built in 1996. It let designers add animation to pages.
Internet Explorer 5 came out on 18 March 1999 for Microsoft Windows and for Apple Macintosh. Microsoft's browser then competed with Netscape from 1996 to 1999. That contest is called the browser wars.
The Wikipedia article on web design says that mobile coverage on 3G and LTE networks moved much web traffic to phones. Designers then chose a mobile first method. It builds the layout for small screens first and adapts it to larger screens. The W3C also released HTML5, CSS3 and JavaScript interfaces as separate standards.
Changelog and latest update
The W3C publishes the Web Content Accessibility Guidelines (WCAG). WCAG sets the accessibility rules for web design. WCAG 2.1 was published as a W3C Recommendation in June 2018. WCAG 2.2 extends WCAG 2.1. Content that meets WCAG 2.2 also meets WCAG 2.0 and WCAG 2.1. The W3C page for WCAG 2.2 states this.
Design tools change with each new standard. Designers use vector and raster graphics editors to make images and prototypes. They use website builders and content management systems to publish pages. They use markup validators and accessibility tests to check the code. The principles of design stay the same, according to the Wikipedia article.
The W3C released CSS level 1 as a Recommendation on 17 December 1996. CSS media queries change a page layout at set screen widths. The MDN guide on media queries explains this. The method sets one design for each screen width, not one design for each device.
Latest update: WCAG 2.2 (W3C Recommendation), 2024-12-12
The W3C page for WCAG 2.2 lists it as a W3C Recommendation dated 12 December 2024. The page names it the latest published version. It links to the latest editor's draft and to WCAG 2.1, the version before it. WCAG 2.2 gives the success criteria that a web design must meet for people with disabilities. The W3C Web Accessibility Initiative (WAI) publishes its guideline pages.
Usage examples
The examples show four parts of a responsive design. They are the viewport setting, a media query, a CSS grid layout and a heading structure. Each one follows the W3C and MDN (Mozilla Developer Network) guidance. The viewport tag tells a phone to use its real width. The media query and the grid set the columns. The heading tags give screen readers and search engines an outline of the page.
<meta name="viewport"
content="width=device-width,
initial-scale=1">This meta element tells a mobile browser to use the real device width. Without it, many phones show a desktop-sized page and shrink it. The initial-scale value of 1 sets the normal size when the page loads.
@media (max-width: 600px) {
.columns {
display: block;
}
}The media query applies its rules only when the screen is 600 pixels wide or narrower. Inside it, the columns class stops side-by-side columns. Each column stacks on its own row. The rule takes effect when the browser width reaches 600 pixels.
.columns {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 16px;
}The grid layout places child elements in rows and columns. The grid-template-columns value makes the second column twice as wide as the first. The gap value adds 16 pixels of space between columns and rows.
<h1>Web design services</h1>
<h2>Website layout</h2>
<h2>Mobile pages</h2>
<h3>Phone menus</h3>One h1 heading names the page. The h2 headings mark its main sections. The h3 heading sits under the h2 heading it belongs to. This order gives screen readers a clear outline. It follows the WCAG rules on info and relationships.
References
These sources are outside Websnoogie and were checked on 2026-10-12.
Web design
Wikipedia
The encyclopedia article on web design. It covers the disciplines of web design, the history from the 1991 World Wide Web to the mobile first approach, the tools that designers use and the link between web design and web development.
Web Content Accessibility Guidelines (WCAG) 2.2
World Wide Web Consortium (W3C)
The W3C Recommendation of 12 December 2024 for WCAG 2.2. It lists the success criteria that make web content accessible to people with disabilities, and it states that content meeting WCAG 2.2 also meets WCAG 2.0 and 2.1.
WCAG overview
W3C Web Accessibility Initiative (WAI)
The W3C Web Accessibility Initiative page that introduces WCAG 2.0, 2.1 and 2.2. It explains how the WCAG documents describe accessible web content and links to the guidance for each version of the standard.
CSS media queries
MDN Web Docs (Mozilla)
The MDN guide to media queries. It explains how CSS applies styles by media type, screen width, orientation and user preferences such as reduced motion. The guide includes the syntax used in the responsive layout examples on this page.
CSS grid layout
MDN Web Docs (Mozilla)
The MDN article on CSS grid layout, a two-dimensional system that places content in rows and columns. It shows the grid-template-columns property and the gap property used in the two-column example.
meta name viewport
MDN Web Docs (Mozilla)
The MDN reference for the viewport value of the meta element. It describes how the viewport size and scale hints control the width of a page on a mobile device, and it explains the width and initial-scale values.
Web design that turns visits into calls
A business website has one main job: turn a search or a visit into a call, a form or a sale. Web design plans the pages, words, pictures and buttons so that a visitor finds the answer in seconds. Without a clear layout, a visitor leaves before reaching the phone number. We design each page around the first question a customer asks, and we put the answer at the top of the screen.
A new site from us works on a phone and on a desktop. We write each page title and description, we add clear alt text to every picture, and we test the forms before launch. Delivery takes 3 to 5 days after we receive your content. Local search engine optimization (SEO) is $190 a month, if you want us to keep the site found in your town.
Buy the domain and WordPress hosting together, and the domain is $24.99 while the hosting is $149. Phone 402-813-4034 from 7 am to 10 pm daily, or order the $300 website and tell us what your business does.
