HTML · Responsive & Mobile-Friendly HTML · Lesson 22 of 32

Responsive & Mobile-Friendly HTML

Responsive & Mobile-Friendly HTML

Responsive web design is an approach to designing webpages so that their layout, content and components adapt to different screen sizes, orientations and devices.

A responsive webpage should provide a usable experience on smartphones, tablets, laptops, desktops and other supported devices without requiring a separate version of the website.

Core Idea:

The goal is not simply to make a webpage smaller on a phone. The goal is to make the entire interface adapt to the available space.

1. Responsive Design vs Mobile-Friendly Design

Term Meaning
Responsive Design Layout and components dynamically adapt to different screen sizes and conditions.
Mobile-Friendly A website provides a usable experience on mobile devices.
Adaptive Design Uses predefined layouts or adjustments for particular screen sizes or device conditions.

In modern development, responsive techniques are commonly combined with flexible layouts, responsive media and accessibility practices.

2. The Viewport Meta Tag

One of the most important pieces of HTML for mobile-friendly webpages is the viewport meta tag. 

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

Meaning

Property Meaning
width=device-width Makes the layout viewport correspond to the device's CSS viewport width.
initial-scale=1.0 Sets the initial zoom level to 1.
Important:

Without an appropriate viewport configuration, a page designed for desktop dimensions may not behave as expected on mobile browsers.

3. Basic Mobile-Friendly HTML Document

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>Responsive Webpage</title>

</head>

<body>

    <header>
        <h1>Responsive Website</h1>
    </header>

    <main>

        <section>

            <h2>Welcome</h2>

            <p>
                This page is designed to adapt to different
                screen sizes.
            </p>

        </section>

    </main>

</body>

</html>

The viewport configuration is part of the foundation of a mobile-friendly webpage.

4. Fluid Layouts

A fluid layout uses flexible dimensions rather than depending entirely on fixed pixel widths.

Less Flexible Approach

<div style="width: 1000px;">
    Content
</div>

A fixed width can cause horizontal scrolling on smaller screens.

Responsive Approach

<div class="content">
    Content
</div>

The corresponding responsive sizing should be handled through the site's existing CSS system rather than forcing a fixed width into the HTML.

Best Practice:

Avoid designing the HTML structure around assumptions about one particular screen width.

5. Responsive Images

Images should be able to adapt to the available layout space.

The HTML structure should provide meaningful image content, while responsive sizing should normally be handled through CSS. 

<img
    src="course-banner.jpg"
    alt="Students learning web development">

Avoid embedding fixed presentation dimensions into the HTML when the design needs to adapt across devices.

6. srcset and Responsive Images

The srcset attribute allows the browser to choose from multiple image resources. 

<img
    src="course-800.jpg"
    srcset="
        course-400.jpg 400w,
        course-800.jpg 800w,
        course-1200.jpg 1200w
    "
    sizes="
        (max-width: 600px) 100vw,
        (max-width: 1000px) 80vw,
        1200px
    "
    alt="Web development course">

The browser can select an appropriate image resource based on factors such as the available display size and device characteristics.

Why use it?

Responsive images can improve performance by avoiding the unnecessary delivery of an excessively large image to a small display.

7. The <picture> Element

The <picture> element allows authors to provide different image sources for different conditions. 

<picture>

    <source
        media="(max-width: 600px)"
        srcset="course-mobile.jpg">

    <source
        media="(min-width: 601px)"
        srcset="course-desktop.jpg">

    <img
        src="course-desktop.jpg"
        alt="Web development course">

</picture>

The fallback <img> element remains important because it provides the actual image and alternative text.

8. Mobile-First Design

Mobile-first design begins with the constraints of smaller screens and progressively enhances the layout for larger screens.

This approach encourages developers to prioritize:

  • Essential content.
  • Simple navigation.
  • Readable typography.
  • Touch-friendly controls.
  • Efficient use of bandwidth.
  • Progressive enhancement.
Concept:

Small screen first → larger screens progressively enhanced.

9. Media Queries

Media queries are primarily a CSS feature used to apply styles according to conditions such as viewport width.

They work together with HTML structure to create responsive layouts. 

/* Base/mobile styles */

.container {
    width: 100%;
}

/* Larger screens */

@media (min-width: 768px) {

    .container {
        width: 80%;
    }

}
Remember:

Media queries are not HTML tags. HTML provides the structure; CSS media queries control responsive presentation.

10. Responsive Breakpoints

A breakpoint is a condition at which the layout changes to better use the available space.

Screen Context Typical Design Consideration
Small screens Single-column layout and simplified navigation.
Medium screens Additional columns or expanded content where appropriate.
Large screens More available space for multi-column layouts.
Professional Tip:

Choose breakpoints based on where the content needs to adapt rather than designing only for specific device names.

11. Responsive Typography

Text must remain readable across different screen sizes.

Responsive typography can be achieved through appropriate CSS units, sizing strategies and spacing.

HTML should provide a logical heading hierarchy: 

<h1>Web Development</h1>

<h2>Responsive Design</h2>

<p>
    Learn how webpages adapt to different devices.
</p>
Accessibility:

Do not use heading elements merely to obtain a particular visual font size. Use CSS for visual presentation and HTML headings for document structure.

12. Responsive Tables

Wide tables can create horizontal overflow on small screens. The table should remain semantically correct while the surrounding responsive design determines how overflow is handled. 

<div class="table-container">

    <table>

        <caption>
            Course Comparison
        </caption>

        <thead>

            <tr>
                <th scope="col">Course</th>
                <th scope="col">Level</th>
                <th scope="col">Duration</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <td>HTML</td>
                <td>Beginner</td>
                <td>8 Weeks</td>
            </tr>

        </tbody>

    </table>

</div>

The existing site CSS can then provide an appropriate responsive treatment for the table container.

13. Responsive Navigation

Navigation often needs to change presentation on smaller screens.

The semantic structure should remain meaningful: 

<nav aria-label="Main navigation">

    <ul>

        <li>
            <a href="/">Home</a>
        </li>

        <li>
            <a href="/courses">Courses</a>
        </li>

        <li>
            <a href="/about">About</a>
        </li>

        <li>
            <a href="/contact">Contact</a>
        </li>

    </ul>

</nav>

CSS and JavaScript can change how this navigation is presented on smaller screens without compromising its semantic structure.

14. Accessible Mobile Menu

A mobile navigation menu commonly uses a button to show or hide navigation links. 

<button
    type="button"
    aria-expanded="false"
    aria-controls="mobile-navigation">

    Menu

</button>

<nav
    id="mobile-navigation"
    aria-label="Mobile navigation"
    hidden>

    <ul>

        <li>
            <a href="/">Home</a>
        </li>

        <li>
            <a href="/courses">Courses</a>
        </li>

        <li>
            <a href="/contact">Contact</a>
        </li>

    </ul>

</nav>

When JavaScript opens the menu, it should update the aria-expanded state and the actual visibility of the navigation.

15. Touch-Friendly Interfaces

Mobile users often interact using touch rather than a mouse. Interactive controls therefore need adequate size and spacing. 

<button type="button">
    Start Course
</button>

<a href="/courses/html">
    Learn HTML
</a>

The HTML provides meaningful controls, while CSS should provide appropriate touch target dimensions and spacing.

Remember:

Do not make important controls tiny or tightly packed. Touch interfaces need sufficient target area and spacing.

16. Avoid Unnecessary Horizontal Scrolling

A common mobile usability problem occurs when content is wider than the viewport.

Common causes include:

  • Fixed-width containers.
  • Very wide tables.
  • Large images.
  • Long unbroken strings.
  • Oversized embedded content.

Responsive Image Example

<img
    src="banner.jpg"
    alt="Web development course">

The site's CSS should ensure that media can scale or otherwise fit the available layout.

17. Responsive Embedded Content

Embedded content such as videos, maps and external documents can cause overflow if its dimensions are fixed. 

<iframe
    src="https://example.com"
    title="Example external content">
</iframe>

The surrounding CSS should provide an appropriate responsive presentation for embedded content.

Accessibility Tip:

Always provide a meaningful title for an iframe when the embedded content needs to be identified by assistive technologies.

18. HTML vs CSS in Responsive Design

HTML CSS
Provides semantic structure. Controls visual layout.
Defines headings, sections and navigation. Controls columns, spacing and alignment.
Provides responsive image markup such as srcset. Controls visual sizing and layout.
Provides accessible controls. Controls their visual presentation.
Provides viewport metadata. Provides media queries and responsive styling.
Key Principle:

HTML = Structure & Meaning
CSS = Presentation & Responsive Layout
JavaScript = Behaviour & Interaction

19. Recommended Responsive Page Structure

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>Responsive Course Page</title>

</head>

<body>

    <header>

        <nav aria-label="Main navigation">

            <a href="/">Home</a>
            <a href="/courses">Courses</a>
            <a href="/about">About</a>

        </nav>

    </header>

    <main>

        <section>

            <h1>
                Learn Web Development
            </h1>

            <p>
                Learn HTML, CSS and JavaScript.
            </p>

            <picture>

                <source
                    media="(max-width: 600px)"
                    srcset="course-mobile.jpg">

                <img
                    src="course-desktop.jpg"
                    alt="Web development learning course">

            </picture>

        </section>

        <section>

            <h2>
                Popular Courses
            </h2>

            <article>

                <h3>HTML</h3>

                <p>
                    Learn HTML from fundamentals to advanced concepts.
                </p>

                <a href="/courses/html">
                    Explore HTML
                </a>

            </article>

        </section>

    </main>

    <footer>

        <p>
            Web Development Learning
        </p>

    </footer>

</body>

</html>

20. Responsive Design and Performance

Mobile devices may operate with limited bandwidth, processing power or battery compared with desktop systems.

Consider:

  • Responsive image resources.
  • Appropriately sized media.
  • Efficient HTML structure.
  • Minimal unnecessary JavaScript.
  • Efficient loading strategies.
  • Accessible and usable navigation.
Professional Tip:

Responsive design is not only about screen dimensions. Performance is also an important part of the mobile experience.

21. Responsive Design and Accessibility

A responsive interface must remain accessible at different viewport sizes.

Check that:

  • Text remains readable.
  • Content does not disappear unexpectedly.
  • Keyboard navigation remains possible.
  • Interactive controls remain usable.
  • Focus remains visible.
  • Mobile navigation has meaningful semantics.
  • Images have appropriate alternatives.
  • Zooming is not unnecessarily restricted.

22. Portrait and Landscape Orientation

Mobile devices may be used in both portrait and landscape orientations.

Responsive interfaces should not assume that a device will always remain in one orientation. 

<main>

    <h1>
        Course Dashboard
    </h1>

    <section>

        <h2>
            Progress
        </h2>

        <p>
            Your course progress is displayed here.
        </p>

    </section>

</main>

CSS can adapt the visual layout when the available viewport changes.

23. How to Test a Responsive Website

Test Different Widths

  1. Open the webpage on a desktop.
  2. Resize the browser window.
  3. Test a narrow mobile-sized viewport.
  4. Test a tablet-sized viewport.
  5. Test a wide desktop viewport.

Check the Following

  • No unnecessary horizontal scrolling.
  • Navigation remains usable.
  • Images fit the available space.
  • Text remains readable.
  • Forms remain usable.
  • Tables remain accessible.
  • Buttons remain easy to operate.
  • Content remains logically ordered.
Real-Device Testing:

Browser resizing is useful, but testing on actual phones and tablets can reveal touch, performance, orientation and browser-specific issues.

24. Common Responsive Design Mistakes

Mistake Better Practice
Forgetting the viewport meta tag Include an appropriate viewport configuration.
Using fixed-width layouts everywhere Use flexible responsive layout techniques.
Using oversized images Use responsive image techniques where appropriate.
Designing only for desktop Consider mobile-first and progressive enhancement.
Very small touch controls Provide adequate target size and spacing.
Breaking keyboard navigation Maintain accessible interaction across viewport sizes.
Using device names as the only breakpoints Choose breakpoints based on content and layout needs.
Hiding important content on mobile Prioritize and reorganize content rather than unnecessarily removing it.
Ignoring landscape orientation Test different viewport dimensions and orientations.

25. Interview Questions

1. What is responsive web design?

View Answer

Responsive web design is an approach in which the layout and components of a website adapt to different screen sizes and viewing conditions.

2. Why is the viewport meta tag important?

View Answer

It helps control how a webpage's viewport is interpreted on mobile browsers, allowing the layout viewport to correspond appropriately to the device width.

3. What is mobile-first design?

View Answer

Mobile-first design starts with the requirements of smaller screens and progressively enhances the interface for larger screens.

4. What is the purpose of srcset?

View Answer

srcset allows authors to provide multiple image resources so that the browser can select an appropriate resource for the current conditions.

5. What is the purpose of the picture element?

View Answer

The picture element allows different image sources to be selected based on conditions such as media queries, while retaining an img fallback.

6. What is a breakpoint?

View Answer

A breakpoint is a condition at which the responsive layout changes to better use the available space.

7. Should responsive design be implemented only through HTML?

View Answer

No. HTML provides semantic structure and responsive image markup, while CSS handles responsive layout and presentation. JavaScript may be used when responsive interaction requires behavior changes.

26. Exam Questions

Q1. Write the viewport meta tag used for responsive webpages.

Answer 
<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0">

Q2. Define responsive web design.

Answer

Responsive web design is a design approach in which webpages adapt their layout and content presentation to different screen sizes and devices.

Q3. Differentiate between localStorage and responsive design.

Answer

This is a category distinction: localStorage is a browser storage API, whereas responsive design is an approach to creating interfaces that adapt to different viewport conditions.

Q4. What are the advantages of responsive images?

Answer

Responsive image techniques can provide appropriate image resources for different display conditions, improving layout behavior and potentially reducing unnecessary data transfer.

Q5. What is mobile-first development?

Answer

It is an approach in which the design begins with smaller screens and progressively enhances the interface for larger screens.

Q6. Why should fixed-width elements be avoided in responsive layouts?

Answer

Fixed-width elements may become wider than the available viewport and cause horizontal scrolling or poor usability on smaller screens.

27. Practical Task — Responsive Course Page

Build a responsive course webpage using semantic HTML.

Requirements

  1. Add the correct viewport meta tag.
  2. Create a semantic header and navigation.
  3. Create a main section containing the course information.
  4. Add a responsive image using srcset or picture.
  5. Create a course information table.
  6. Add an accessible registration form.
  7. Create a responsive navigation menu.
  8. Ensure all interactive elements are keyboard accessible.
  9. Test the webpage at different viewport widths.
  10. Test the webpage in both portrait and landscape orientations.

Advanced Challenge

Create a mobile navigation button using aria-expanded and aria-controls. Use JavaScript to update the menu state while keeping the interface keyboard accessible.

28. Responsive Design Checklist

  • Viewport: Is the viewport meta tag present?
  • Layout: Does the content adapt to different widths?
  • Images: Do images fit the available space?
  • Navigation: Is navigation usable on small screens?
  • Typography: Is the text readable?
  • Forms: Are controls usable on touch devices?
  • Tables: Can wide data remain usable on small screens?
  • Accessibility: Does keyboard navigation still work?
  • Orientation: Does the page work in portrait and landscape?
  • Performance: Are unnecessarily large resources avoided?

29. Quick Revision

Concept Remember
Responsive Design Layout adapts to available screen space.
Viewport Controls how the page is interpreted in the browser viewport.
Mobile First Start with smaller screens and progressively enhance.
Media Query CSS mechanism for applying styles based on conditions.
Breakpoint Condition where layout adaptation occurs.
srcset Provides multiple image resources for browser selection.
picture Provides conditional image sources with an img fallback.
Touch Friendly Controls need sufficient target size and spacing.
Accessibility Responsive layouts must remain accessible at different sizes.
Testing Test different widths, devices and orientations.
Exam Mantra:

Viewport → Mobile Rendering | Mobile First → Small to Large | Media Query → Responsive CSS | srcset → Image Resources | picture → Conditional Images | Breakpoint → Layout Change | Responsive Design → Adaptable Interface

Start This Course From the Beginning →