1. Know Responsive and Adaptive Design
Responsive Design: Flexible grids, layouts, and CSS media queries adapt to all screen sizes.
Adaptive Design: Different layouts are designed for specific screen sizes or resolutions.
2. Mobile-First Approach
Design for the smallest screen size first and then scale up for larger screens.
This way, the most important features are accessible and usable on mobile devices.
Example:
Start with a 360px wide layout for smartphones.
Expand to tablets, desktops, and larger displays.
3. Flexible Grid System
Use CSS Grid or Flexbox for layout structures.
Set widths and heights in percentages or relative units (e.g., em, rem, vh, vw) instead of fixed pixels.
Example CSS Grid:
css
Copy code
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
4. Media Queries
Media queries allow you to apply different styles based on screen size and resolution.
Example:
css
Copy code
@media (max-width: 768px) {
body {
font-size: 14px;
}
}
@media (min-width: 769px) {
body {
font-size: 16px;
}
}
5. Optimize Images and Graphics
Use responsive image techniques:
The srcset attribute to provide different image sizes for different screen resolutions.
Example:
html
Copy code
<img src="small.jpg" srcset="medium.jpg 768w, large.jpg 1200w" sizes="(max-width: 768px) 100vw, 50vw" alt="Responsive Image">
Use the next-gen formats like WebP for the purpose of better compression and faster loading.
6. Scalable Typography
Scale the font sizes through the relative units such as em or rem.
Media queries should be used to make a size change in case of a larger screen.
Example:
css
Copy code
body {
font-size: 1rem; /* Base size */
}
@media (min-width: 1200px) {
body
font-size: 1.25rem;
}
7. Touch-Friendly Elements
Make sure that buttons and interactive elements are big enough for touch screens.
Minimum size: 48px x 48px according to Google Material Design.
Provide sufficient spacing between touch elements to prevent accidental taps.
8. Testing on Real Devices and Emulators
Browser developer tools are used to test responsiveness.
Chrome DevTools: Ctrl+Shift+M (Windows) or Cmd+Shift+M (Mac).
Test on real devices for proper performance, including smartphones, tablets, and desktops.
Tools:
BrowserStack: Cross-device testing.
Responsinator: Visualize your design on different devices.
9. Use Responsive Frameworks
Utilize frameworks like Bootstrap, Foundation, or Tailwind CSS for pre-made responsive components.
Example: Bootstrap Grid System
html
Copy code
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6">Column 1</div>
<div class="col-sm-12 col-md-6">Column 2</div>
</div>
</div>
10. Reduce and Refactor for Performance
Eliminate unnecessary graphics and scripts.
Lazy-load images and videos.
Cache and compress using Gzip and Brotli
11. Design for Accessibility
Utilize a color contrast ratio that satisfies the WCAG requirements.
Keyboard, and screen reader navigation is also taken care of
HTML used should be semantic so that it can work well in different devices
12. Plan for Future Devices
Design flexible according to the availability of the new screen sizes, such as foldable phones or ultra-wide monitors.
Use min, max, and clamp in CSS for more adaptive layouts.
Screen Size and Resolution Breakpoints (Common Standards)
Type of Device\tScreen Width in Pixels
Mobile Phones\t320px – 480px
Tablets\t481px – 768px
Small Laptops\t769px – 1024px
Desktops\t1025px – 1920px
Large Displays\t1921px and above
