Matthew James Taylor

Matthew James Taylor

Artist. Designer. Author.
Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Architecture

Written & Illustrated by Matthew James Taylor
Published 3 January 2022
Updated 8 January 2022

Jump to:

Two of my biggest passions in life are small-house architecture and web design.

With architecture, I like to design city houses that fit into narrow gaps or awkward spaces.

And with web design, I'm always building responsive layouts that adjust to fit on any size screen.

Today, we're going to combine the two!

Introducing the world's first responsive house plan:

Responsive House Plan

Adjust the land width by clicking the buttons. Watch the house change design to fit the available space. Full explanation after the floor plan:

4m 5m 6m 7m 8m 9+m

Watch the video:

Watch this house plan automatically adjust its layout to fit the width of the land as it gets narrower. This works exactly the same way as a responsive website that fits any size screen from mobile to desktop.

In web design, it's best practice to implement a 'mobile-first' approach. This means you design for small screens first, then progressively add more design complexity as screens get larger.

So to honor this philosophy, let's go through the various features of this responsive house starting at its narrowest.

4 Meter Wide House

4 meters (13 feet) is about the narrowest you can go with a traditional, single-story house. You can go narrower, but you'll need to get creative! (See my 3 meter wide driveway house plans for some examples)

With land this narrow, your house needs to take up the full width of the plot. This means you will often be sharing side boundary walls with the houses next door.

Terrace houses that share boundary walls are quite common in many cities.

A row of joined terrace houses in Sydney, Australia
A row of joined terrace houses in Sydney, Australia

My responsive house is designed like a typical terrace house, it starts with a hallway past two bedrooms.

A lightwell provides ventilation and natural light
A lightwell provides ventilation and natural light

Following the bedrooms, the hallway continues past a bathroom. The bathroom is narrower than the bedrooms to make way for a lightwell.

A lightwell is a small outside area that allows for ventilation and natural light through external windows. Bedroom 2 and the bathroom have external windows into the lightwell.

An open-plan living room is accessed by a door at the end of the hallway. This living room is pushed to the full width of the land to maximize internal space.

A skylight is placed above the kitchen to provide good natural light.

The rear of the house has large glass doors that open onto a deck.

5 Meter Wide House

If we increase the land width to 5 meters (16 feet) we have enough width to join the lightwell to the backyard with a side passage.

With a side passage, we can add external windows to the kitchen and dining room. This means we can remove the kitchen skylight.

6 Meter Wide House

At 6 meters wide (19.5 feet) we can extend the side passage to the full length of the house from front to back. This makes the house a duplex if it is joined by a similar, mirror-reversed house on the left side.

Both bedrooms can now have external windows on the side of the house.

The two bathroom windows can now be replaced with a single, larger window onto the side passage.

7 Meter Wide House

A central hallway flanked by rooms
A central hallway flanked by rooms

At 7 meters (23 feet) we have just enough room for a central hallway flanked by rooms on either side, providing we use the full width of the land again.

This wide design reduces the length of our hallway, saving us precious space.

Is it good to reduce hallways? Read my article to find out: Hallways: Are They a Waste of Space?

This new, wider design also gives us more room in the backyard.

Both bedrooms lose their side windows but now have large, matching front-facing windows.

The bathroom window is moved to the side passage, facing the backyard.

The kitchen skylight is required again because an external window is not possible through the shared boundary wall.

8 Meter Wide House

At 8 meters (26 feet) we can once again extend the side passage along the full length of the house from front to back. This means the house is only sharing a wall on one side so it can be built as a duplex.

Bedroom 1 gets its side window again.

The bathroom windows move to the side wall too.

9+ Meter Wide House

Once we get to 9 meters (29.5 feet) we have enough room for side passages on both sides. We no longer need to share boundary walls with our neighbors.

Bedroom 2 gains a side window.

The kitchen gets its side window back so we don't need the skylight.

We can add a side window to the lounge area too.

Now the house is fully detached it becomes a simple rectangle shape which makes construction easier.

We can continue to widen the land from here but the house doesn't need to respond any further, it's only optional.

Here are all the designs side-by-side: (Click for larger image)

The 6 variations of the house plan at different widths
The 6 variations of the house plan at different widths

How Does the Responsive House Plan Work?

I built the house plan just as I would a website — as a responsive HTML webpage. I then display this webpage in an iFrame within the article.

When you click the different sizes I simply change the width of the iFrame with javascript and the house plan automatically adjusts.

You can view the house plan directly if you are curious to see what it looks like by itself.

Free Download

Download the source file and experiment with responsive house plans for yourself:

Download
(responsive-house-plan.zip 5kb)

...

I hope you enjoyed this crazy experiment.

Next up:
Responsive Banner Ads
13 Small-House Design Principles

Julian Ashton Art School life drawing studio

Life Drawing: The Complete Guide (Illustrated)

Art
A nice sharp pencil

The Art of Sharpening Pencils (Styles & Techniques)

Art
Small house blueprint

13 Small House Design Principles (The Illustrated Guide)

Architecture
Columns all the same height

Equal Height Columns with Cross-Browser CSS and No Hacks

Web design
How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Web design
Flowers growing in a tiny house window flowerbox

12 Small House Benefits: Why Building Tiny Makes Sense!

Architecture
Sepia ink life drawing

Ink Life Drawing (6 Experiments with Nibs & Brushes)

Life drawing
Graeme Frontbum

Graeme Frontbum (About the Comic Strip & Characters)

Comics
Ogga surfing

Ogga the Cane Toad (About the Comic Strip & Characters)

Comics
Lyndal the flower girl

Art by Matthew James Taylor (Paintings, Drawings, Digital Art, & More)

The alphabet in colors according to my synesthesia

Synesthesia: My Colored Alphabet & Four-Leaf Clovers!

Footer at the bottom of the page

Get Down! How to Keep Footers at the Bottom of the Page

Web design