We and our partners use cookies to Store and/or access information on a device. We and our partners use data for Personalised ads and content, ad and content measurement, audience insights and product development. An example of data being processed may be a unique identifier stored in a cookie. Some of our partners may process your data as a part of their legitimate business interest without asking for consent. To view the purposes they believe they have legitimate interest for, or to object to this data processing use the vendor list link below. The consent submitted will only be used for data processing originating from this website. If you would like to change your settings or withdraw consent at any time, the link to do so is in our privacy policy accessible from our home page.
Responsive House Plan (Web Design Meets Architecture!)
Matthew James Taylor22 March 2016
Updated 8 January 2022
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:
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.
My responsive house is designed like a typical terrace house, it starts with a hallway past two bedrooms.
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
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)
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 ›
My Popular Articles
Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)
Web design
How to add CSS to HTML (With Link, Embed, Import, and Inline styles)
Web design
Art by Matthew James Taylor (Paintings, Drawings, Digital Art, & More)
