Today, we begin our journey into adaptive web design. Our goal is to create websites that adapt to a multitude of screen sizes.

Adaptive design involves the use of static layout designs that are tailored to suit different screen sizes. This stands in stark contrast to responsive design, which adjusts the layout fluidly to accommodate any screen size.

Consider the example of reading an eBook on various devices. The layout of the book intuitively adapts to different screen sizes, ensuring an optimal reading experience. This is the essence of adaptive design — it prioritizes usability and is focus-driven, ensuring that website visitors can navigate with ease, read text without straining, and interact with elements effortlessly.

The layout of a website can significantly differ depending on whether it's being viewed on desktops, tablets, or mobile devices.

• When viewed on desktops, both the content and the navigation menu can comfortably coexist side by side.
• On tablets, designers often resort to a simplified navigation approach using the hamburger (☰) menus, which expand when clicked.
• On mobile devices, due to the stringent space constraints, minimalism takes center stage in layout design.

We utilize the capabilities of HTML and CSS to ensure seamless adaptive navigation.

HTML, XML
Copy to clipboard
1<!-- A simple navigation list example -->
2<nav>
3  <ul>
4    <li><a href="#home">Home</a></li>
5    <li><a href="#about">About</a></li>
6    <li><a href="#contact">Contact</a></li>
7  </ul>
8</nav>

In this piece of code, we're using a navigation (<nav>) element housing an unordered list (<ul>) of links (<a>). This list, coupled with the appropriate use of CSS, adapts with ease to a wide range of screen sizes.

Dynamic menus, such as dropdowns and toggles, add an element of interactivity to website navigation. This interactivity is made possible by using CSS for design purposes and JavaScript for adding interactive elements.

HTML, XML
Copy to clipboard
1<!-- An example of a simple dropdown menu -->
2<div class="dropdown">
3  <button class="dropdown-button">Menu</button>
4  <div class="dropdown-content">
5    <a href="#">Option 1</a>
6    <a href="#">Option 2</a>
7    <a href="#">Option 3</a>
8  </div>
9</div>
10
11<!-- The accompanying CSS for the dropdown menu -->
12<style>
13.dropdown-content {
14  display: none;
15  position: absolute;
16}
17.dropdown:hover .dropdown-content {
18  display: block;
19}
20</style>

In this code snippet, the dropdown menu is made invisible by default using CSS. Upon hovering over the menu, its items are revealed. By implementing JavaScript to enhance this design layout, we can significantly increase the level of dynamism and interactivity in the dropdown menu.

The CSS display property defines the display behavior (the type of rendering box) of an element. It plays an essential role in controlling the layout of your website. Here are some of the most commonly used values for the display attribute:

• block: Elements display as a block, like paragraphs and headers. A block element starts on a new line, taking the full width available and has a top and a bottom margin.

  CSS
  Copy to clipboard
  1div {
  2  display: block;
  3}

  div elements are block-level elements by default.

• inline: Elements display in-line, without starting a new line. Inline elements don't occupy the entire space of a container. Instead, they take only as much width as necessary. There is no top or bottom margin, and you can't set the width or height.

  CSS
  Copy to clipboard
  1span {
  2  display: inline;
  3}

  span elements are inline elements by default.

• none: If an element has display: none;, the element will not be displayed at all—rendered as if it was never part of the DOM. However, the element still exists in the DOM, just not visible.

  CSS
  Copy to clipboard
  1div {
  2  display: none;
  3}

• inline-block: Elements set to inline-block are like display: inline elements, but they can have a width and height. They're placed in-line but function as block-level elements within the line.

  CSS
  Copy to clipboard
  1div {
  2  display: inline-block;
  3}

• flex: Flex layout is a way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic. The main idea behind the flex layout is to give the container the ability to alter its items' width/height to best fill the available space.

  CSS
  Copy to clipboard
  1div {
  2  display: flex;
  3}

• grid: Grid layout provides a system in which DOM elements can be arranged and aligned on a webpage, like a flexible grid. It's a fantastic tool when designing a complex web layout.

  CSS
  Copy to clipboard
  1div {
  2  display: grid;
  3}

Remember, every element has a default display value depending on what type of element it is. The default value for most elements, like div, is usually block or inline.

Let's examine how Amazon implements this concept. What stands out is the way in which the layout of the website adapts to the size of the viewport. On desktop devices, you'll notice a concise navigation menu at the top. On mobile devices, both the content and navigation are simplified to deliver a streamlined user experience.

This demonstrates that a layout perfect for one screen size may not perform as efficiently on another screen size. The key here lies in the flexibility and adaptability of the design layout.

Congratulations on mastering the basics of adaptive design! You've armed yourself with knowledge about the importance of adaptive design, the intricacies of designing navigations suitable for varying screen sizes, and the art of creating dynamic menus with CSS and JavaScript. Up next, we have a series of hands-on exercises that will allow you to apply this knowledge. Remember, practice makes perfect. Let's get started!