Home

Designing a responsive layout for a societal application


Aim

To design a responsive layout for a societal application that adapts to all device sizes—desktop, tablet, and mobile—using HTML and CSS.

Algorithm/Procedure

  1. Define Purpose and Audience:

    • Determine the goal of the application (e.g., information/resource sharing, community updates).

  2. Set Breakpoints:

    • Identify major screen sizes (mobile, tablet, desktop).

  3. Create Layout Using Fluid Grids & Flexbox:

    • Use percentage widths and Flexbox for flexible layouts.

  4. Design Navigation:

    • Create a navigation bar that reorganizes for smaller screens.

  5. Use Responsive Components:

    • Sections/content adapt and reorder for every device.

  6. Apply Media Queries:

    • Use CSS media queries to adjust styles at defined breakpoints.

  7. Test and Iterate:

    • View on multiple devices, adjust as needed for usability.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Societal Application</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            background: #f9f9f9;
        }
        header {
            background: #009688;
            color: white;
            padding: 2rem;
            text-align: center;
        }
        nav ul {
            display: flex;
            flex-wrap: wrap;
            background: #eee;
            padding: 0;
            margin: 0;
            list-style: none;
            justify-content: center;
        }
        nav ul li {
            margin: 1rem 2rem;
        }
        nav ul li a {
            text-decoration: none;
            color: #009688;
            font-weight: bold;
        }
        main {
            display: flex;
            flex-wrap: wrap;
            padding: 2rem;
            gap: 2rem;
            justify-content: center;
        }
        section {
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
            padding: 2rem;
            border-radius: 8px;
            min-width: 250px;
            max-width: 450px;
            flex: 1 1 350px;
        }
        footer {
            text-align: center;
            background: #009688;
            color: white;
            padding: 1rem;
            margin-top: 2rem;
        }
        @media (max-width: 700px) {
            main {
                flex-direction: column;
                padding: 1rem;
            }
            section {
                margin: 0 auto 1rem auto;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>Societal Application - Responsive Layout</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Community</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <main>
        <section>
            <h2>Services</h2>
            <p>Access health, safety, and education services anytime, anywhere.</p>
        </section>
        <section>
            <h2>Community News</h2>
            <p>Stay updated with the latest news affecting your neighborhood.</p>
        </section>
        <section>
            <h2>Resources</h2>
            <p>Find government schemes, jobs, and support programs.</p>
        </section>
    </main>
    <footer>
        &copy; 2025 Societal Application. All rights reserved.
    </footer>
</body>
</html>

Output



Result

A professional, easy-to-navigate responsive layout for a societal application is created using HTML and CSS Flexbox with media queries. The site adapts smoothly to any device, presenting a clean interface for accessing community-focused services.