Mobile devices have a smaller screen, are generally touch oriented, and have different user experience expectations than a desktop computer.
To accommodate smaller screens, we use responsive web design techniques. This means designing the application to accommodate the screen size and ensuring websites provide optimal viewing and interaction across a wide range of devices. Techniques include changing font sizes, rearranging elements on the screen, using collapsible elements that open when touched, and resizing images or videos to fit available space. This is called responsive because the application responds to device characteristics by making these changes.
Note
By mobile-first, we mean that you design the application first to work well on a mobile device and then move on to devices with larger screens. It's about prioritizing mobile devices first.
The primary technique is using media queries in stylesheets to detect device characteristics. Each media query section targets...