How did Embed ly get so big

Anatomy of a website

How is a website composed? An overview of the structure and naming conventions of elements.

Atoms, molecules and organs

Atomic Design Theory is a clever way to explain the anatomy of websites.

The smallest design tokens are the atoms, which are formed into molecules and these grow together to form organs. The structure of the website can be described very well with this logic.

All website pages and components can be broken down into their component parts.

HTML code is written nested and depicts this structure as well. So this analogy makes double sense.

This modular system enables a modular and scalable web design.

Modular construction kit

Often other terms are used instead of the Atomic Design terms. But they mean the same modular building block principle.

Atoms are elements, molecules are components, and organisms are called modules.

The difference between larger and smaller components or modules is often fluid and is redefined for each project. Very large modules are also referred to as apps.

The naming differs from agency and developer. But the nested construction remains.

repetition

Repeat instead of reinvent

The repetition and consistency of design elements enables modular and scalable website development.

The front-end programming, the website anatomy, everything is based on a structured anatomy.

Complex websites need a consistent design language. Websites can be expanded modularly via CMS and the individual pages change their appearance depending on the order in which the components are arranged.

What applies in CSS also applies to the modules and components.

Special cases are to be avoided.

Each deviation must be specifically defined. Web design must be precisely defined and conceptually sound arguments. Uniform, robust and scalable. This is a curse first, and then a blessing.

Device name

Each viewport size should be clearly identified. It helps to approach the responsive design more clearly.

There are countless screen sizes, but in the design development of websites, reference designs for two to three viewports are usually created for reasons of efficiency.

Each project team has their preferences as to how they name these viewport sizes.

The right reference size

Desktop width

1440 pixels is a good base

1280 pixels is also often used

Tablet width

1024 pixels is a standard (landscape)

768 pixels is also often used (portrait)

Mobile width

375 pixels as standard for iOS

360 pixels as standard for Android

Tip 1: The smaller the mobile width as a reference design, the better the layout works for larger phones. z. B. iPhone SE with 320 pixels.

Tip 2: Use your personal phone as a reference so that you can preview your design live.

Sitemap

Hierarchical structure of content

In order to plan the construction kit and to define the modules and components, a sitemap of the website's content is created.

A sitemap is the hierarchical structure of content according to pages and subpages. Visually it is represented as a tree diagram.

Sitemaps give an initial idea of ​​which page types are needed. The modules of specific page types are partly defined by their names.

The blog or the agenda are such types of pages. Contact pages or team pages already indicate certain standard modules.

The content topic is examined in more detail in the chapter on content strategies.

Page types

Every website consists of a defined number of page types. It can be compared with the sample pages in InDesign.

These page types or page templates have to be imagined as a container in which the modules are inserted. It is the repetitive areas that appear on all pages: header, side nav, content area, footer.

Side types are the skeleton in which the organs come to lie.

info

In English are web sites and web pages logically separated from each other. In German there are both times Web pages. Therefore, it makes even more sense in German to classify the page types.

Classic page types

Home page

The home page. The first page of a domain (index.html). In most CMS or site builders you can specifically mark the home page as such.

Landing page

The page that can be reached via an external link. The first page that a user sees in his session. Targeted use is made in marketing.

Content page

A content page. Is used as a standard container for subpages.

Detail page

Bottom with content. Analogous to the content page.

Overview page

Overview page, which leads to further sub-pages. Often generated automatically by a CMS.

One pager

A very common form of website. Everything is shown on one page and made accessible by scrolling. A practical choice for smaller websites.

Intro page

A page that comes before the homepage. z. B. for language or country change.

Many of the modular parts of a website anatomy have been given clear names.

Calling things by their right names is hugely helpful.

Naming conventions

Let's look at a few website components or modules that can be found on popular websites.

It pays to use consistent names. It makes it possible to talk about the same things and the same functionalities across projects, teams and agencies.

We will now work our way through a website from top to bottom and name the components.

The header area helps with its components for orientation.

The navigation, usually the main navigation, can be found there, as well as the company's logo.

Larger websites often have a meta-navigation above the main navigation to offer more specific content links.

Header components

logo

Linked to the homepage by default. By default, top left.

navigation

Main navigation

The main navigation to find your way around the site. Mostly horizontal.

Sub navigation

The second navigation level after the main navigation. Sub-Sub is the third. Usually only accessible by hovering or clicking.

Side navigation

Vertical side navigation is worthwhile for websites with a lot of content. Also called a sidebar. Main as well as sub navigation can be in a side navigation.

Meta navigation

Navigation elements that are special. Mostly the language selection, search and higher-level pages can be found there.

Dropdown

A menu that comes out of the button.

Fly-out navigation

Large-scale navigation, which appears by hovering or clicking.

Sticky Navigation / Sticky Header

A navigation or a header that is stuck to the edge of the browser and thus always remains visible.

Additional

Breadcrumb

«Breadcrumbs» To find your way back to the home page like Hänsel & Gretel. It helps to find your way through all the sub-pages.

Language switch

Language change. The language selection is set automatically on many larger websites using the browser language predefined by the user. But often found in the header area.

Searchfield

For entering the search term. New without a button, only with an icon, because you press «Enter».

The search results are mostly on a new page.

Hero

The atmospheric introduction to a page.

A hero is usually an image with a short text that takes up the full browser size. It is an emotional introduction to the world of the website.

Hero teaser

Full-page picture with typography and a “call to action button” as a page entry. The button points directly to a relevant detail page on the website.

Hero Slider Gallery (Hero Carrousel)

Full-page picture gallery to put several contents of a website “attractively” in the center. Often with automatic image change. But whether static or automatic. It doesn't make sense from a UX point of view. Either a user fails to read or he does not see the content that is still hidden, even though it is central.

Teaser

Teasing = teasing. So preview boxes, which advertise content.

Most of the time, the contents of these boxes are taken dynamically from the corresponding detail page. This simplifies content editing.

Most teasers refer to a detail page, but with a larger page and many teasers you begin to classify these teasers more specifically.

Teaser components

Teaser Slider Gallery (Carrousel)

Emotional introduction to the currently most important topics on the website.

Automatic transitions are a bad habit.

Detail-page teaser

An attractive box that shows the first content of a specific detail page.

Product teaser

A box that advertises products on a page. (Often these are detail pages)

Shop teaser

A box that advertises a shop or item.

Article teaser

A box that advertises articles from a blog or newspaper.

News teaser

A box that advertises the news of a website.

Event teaser

A box that advertises a company's events.

Text is so ubiquitous that it is often not recognized as a component.

Plain text

Plain Text is a simple text field assigned to a clear HTML class.

Rich text

A text field that can display different text formats and titles. It's kind of like a word box. Certain rich text modules of certain CMSs also enable the integration of images or tables within the rich text.

Tables

Tables for listing numbers or things.

Call to Action

Every web page has a dramaturgy of how the content is presented. A call-to-action (CTA) is the visually evident request for the user to do something.

Usually the “highlight” of a single page.

The visual implementation of a CTA is basically very trivial.

Classic call to actions

Button

A visually clearly visible interaction area with a link. Buttons have different states, which change when you interact with the button.

link

A classic text link. This can be on another URL or on a page within the website. Or to a PDF or as an anchor to another section of the same detail page.

Sticky call to action

The "Call to Action" which is always available. It sticks to the edge of the browser. Often «feedback» or a «chat box service».

Next Best Click (NBC)

An intelligent type of call to action that dynamically adapts to content and user.

Forms are input fields on websites to receive and save user information.

A distinction is made between the type of form field and the input type.

Form elements

There is the simple input field or the select or multi-select field as well as the text field for longer messages.

Input types

There is a wide range of input types. From the simple text field via the Submit button or entering the date or password.

Overview: input types

text

Plain text. Single line.

Password

When entering the password, the entry is replaced by ****.

Submit button

Buttons are used in forms to send or save a form.

Reset button

A button that puts the Form Field entries back to the beginning.

Radio button

With radio buttons, only one option can be selected at a time.

Checkbox

Several options can be selected for the checkbox.

Range / slider

Instead of
A dropdown or select box can also be used as a
Represent controller. It works like the radio button.

Color

Allows the user to choose a color. Opens the OS supported browser palette

Date picker

Date picker. It can also be provided with a time or just weeks or months.

e-mail

Validates whether the syntax of an email address is correct in the input. Say text before the @ after the @ and then add a point and a top-level domain: [email protected]

Number

Allows entry of numbers only. Activates the numeric keypad in certain mobile operating systems.

Search

A text entry field that has an (X) at the end to delete the entry.

Tel

Enter the telephone number with the syntax of a telephone number.

Url

Enter a URL with the syntax of a URL. Some mobile operating systems show the .com in the keyboard.

Embedded content

The integration of other website content is called embed. These are e.g. B. YouTube or Vimeo videos, Google Maps maps or Soundcloud songs.

This is often resolved through embed services such as embed.ly. Code snippets “embed” instead of “share” are offered by many services.

Advantage: Complex tasks are outsourced and only linked. e.g. video player or card. In addition, these platforms can immediately distribute and link the content.

Disadvantage: Design is unsuitable by default. There is not always the possibility of customizing the embedded content.

Embeded content elements

Video

Making videos and video players yourself is not trivial. In addition, it does not necessarily make sense in terms of marketing strategy. YouTube, Vimeo and Co. can be easily integrated into most site builders.

Maps

Maps are embedded as elements in a web page. The content shown comes from the map website itself. It doesn't always have to be Google.

PDF viewer

PDFs can also be placed on the network and integrated using a viewer. Issuu and Yumpu are two possible services.

iFrames

Code snippets to integrate entire websites into other websites. Most of the time, this is not made available as a module in the CMS, but is implemented correctly in development.

Images

Images are almost as normal as text on a website.

We'll go into image design on the web later. This is about the naming conventions.

image

Image on a website.

Thumbnail

Small picture, which is reduced either manually or via the CMS / server engine. Due to its size, the website loads faster.

Light Box or Fancy Box

An overlay over the page to show the desired content in large format.

Media galleries are a common way of grouping multiple similar media together. Either as a tiled compilation or as a slideshow.

Image Gallery

Picture gallery to show several pictures.

Media Gallery

Images and videos in a gallery. Embedded media such as Soundcloud songs or maps could also appear in a media gallery.

Video Gallery

Video gallery to show several videos one after the other.

Slideshow & Carrousel

A gallery in which the media come into the visible area one after the other.

Social buttons

There are two almost identical but fundamentally different social media buttons. It is important to separate them cleanly from each other. You can find many mixed up examples on the internet.

Social share buttons

To share the current page content on your own social media channels. Most of them are posted on the left or right. Since many users prefer to copy the URL, this is often also offered in this button collection.

Social follow buttons

Link to the website's social media accounts. So the Facebook Like or Twitter Follow button. Either you are brought onto the platform first or you can follow the displayed channel directly. Mostly found in the footer.

Interlaced content

In order to offer a clear focus on the overview of topics, stacked content containers are used. Either horizontally or vertically.

Tabs

Tabs with different content boxes. Visually to the tabs of a folder
ajar. Any content can come within the tab. Tabs are mostly horizontal.

accordion

Foldable content elements. Similar to a tab. Any modules can be loaded within an accordion. Mostly vertical.

The advantage of accordions over tabs is their responsiveness. Tabs are mostly converted into accordions on mobile.

Blog / News

Blog or news pages often have a date-based (chronological) arrangement. Mostly with an author.

A blog article is managed as a separate content page (page type) in a CMS. Because they have specific attributes: author, date, tags or categorization, etc.

Blog Overview

Various blog articles in one overview.

Blog Article Teaser

An excerpt from a blog article as a teaser box. There are usually several blog article teasers on the overview page.

Blog Article / Blog Detail Page

A blog article in its full length. Often with rich text, image, video, gallery and text modules.

"Basically a very similar module to the blog, but with an agenda there is data in the future and data in the past. Most of the time, a past event is then moved to the archive."

Agenda Overview

Various agenda events in one overview.

Agenda event teaser

An excerpt from an event as a teaser. There are usually several event teasers on the overview page.

Event Detail Page

A full-length event page. Often with rich text, image, video, gallery and text modules.

The completion of a website. Usually with a lot of links. The language change can be found more and more often in the footer.

Meta navigation

Often an excerpt from the administratively important pages of a company. Terms and conditions, imprint and contact.

Contact

Usually the footer gives a contact address.

copyright

The copyright is often cleared in the footer.

Sitemap

A compilation of all pages on the website.

The comparison with the anatomy gives us a better understanding of the logic with which we have to plan our design.

We now have a rough understanding of the technical aspects of a website. Let us now dedicate ourselves to the king. The content. Respectively the stories that we tell with a website are the foundation of the technical and visual development of a website.