{"id":1575,"date":"2026-11-06T14:20:49","date_gmt":"2026-11-06T13:20:49","guid":{"rendered":"https:\/\/fresh-dev.nl\/?post_type=case&#038;p=1575"},"modified":"2026-11-06T14:28:09","modified_gmt":"2026-11-06T13:28:09","slug":"bouwbedrijf-binnen-en-buiten","status":"publish","type":"case","link":"https:\/\/fresh-dev.nl\/en\/werk\/bouwbedrijf-binnen-en-buiten\/","title":{"rendered":"Construction company Binnen en Buiten"},"content":{"rendered":"<div class=\"section section-pageheader-detail-information\"><img decoding=\"async\" class=\"background-image\" src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/11\/binnen-en-buiten-gevel.jpg\" alt=\"Construction company Binnen en Buiten\">        <div class=\"pageheader-wrapper\">\n            <div class=\"container\">\n                <div class=\"inner\">\n                    <h1 data-split=\"heading\" data-split-reveal=\"words\">A website that does <strong>solid construction<\/strong> Van Binnen en Buiten shows\n<\/h1>                    <div class=\"breadcrumbs\" data-reveal-group>\n                        <nav aria-label=\"breadcrumbs\" class=\"rank-math-breadcrumb\"><p><span class=\"last\">Home<\/span><\/p><\/nav>                    <\/div>\n                    <div class=\"information-block\"  data-reveal-group>            <div class=\"block\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                                    <span>Client<\/span>\n                                                    <p>Construction company Binnen en Buiten<\/p>\n                            <\/div>\n                        <div class=\"block\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                                    <span>Project<\/span>\n                                                    <p>New website<\/p>\n                            <\/div>\n            <\/div>                <\/div>\n            <\/div>\n        <\/div>\n        <\/div>\n\n<div class=\"section section-content two-columns has-pink-element\">        <div class=\"container\">\n                            <div class=\"content-holder\" data-reveal-group>\n                            <div class=\"column\">\n            <div class=\"content\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                                    <h4>About our client<\/h4>\n                                                    <h2><h2>Construction company Binnen en Buiten from <strong>Obdam<\/strong><\/h2>\n<\/h2>\n                            <\/div>\n        <\/div>\n                                    <div class=\"column\">\n            <div class=\"content\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                <p>Construction company Binnen en Buiten is a small construction company from Obdam. They install plastic and aluminum windows, sliding patio doors, skylights and facade cladding. Front doors and canopies are also part of their range.<\/p>\n<p>Anyone who comes to your home to take a look knows the industry and thinks along with you about what would suit your home. You have one point of contact, from the initial visit to the completion of the renovation. This approach should also be reflected on the website.<\/p>\n            <\/div>\n        <\/div>\n                        <\/div>\n                    <\/div>\n        <\/div>\n\n<div class=\"section section-images-grid\">        <div class=\"container\">\n                            <div class=\"grid-holder\" data-reveal-group>\n                    <div class=\"three-images\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">            <div class=\"grid-item\">\n                <div data-parallax-scrub=\"2\" data-parallax=\"trigger\" data-parallax-start=\"-30\" data-parallax-end=\"0\" class=\"parallax-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/11\/binnen-en-buiten-homepage.jpg\" alt=\"Homepage of the website of Construction Company Binnen en Buiten\">\n                <\/div>\n            <\/div>\n                        <div class=\"grid-item\">\n                <div data-parallax-scrub=\"2\" data-parallax=\"trigger\" data-parallax-start=\"-30\" data-parallax-end=\"0\" class=\"parallax-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/11\/binnen-en-buiten-ruiten.jpg\" alt=\"The four panes of glass as one frame\">\n                <\/div>\n            <\/div>\n                        <div class=\"grid-item\">\n                <div data-parallax-scrub=\"2\" data-parallax=\"trigger\" data-parallax-start=\"-30\" data-parallax-end=\"0\" class=\"parallax-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/11\/binnen-en-buiten-fotofilter.jpg\" alt=\"Project page with filter on roof windows\">\n                <\/div>\n            <\/div>\n            <\/div>                <\/div>\n                    <\/div>\n        <\/div>\n\n<div class=\"section section-content two-columns has-blue-element\">        <div class=\"container\">\n                            <div class=\"content-holder\" data-reveal-group>\n                            <div class=\"column\">\n            <div class=\"content\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                                    <h4>What we have done<\/h4>\n                                                    <h2><h2>A design that starts with the <strong>logo<\/strong><\/h2>\n<\/h2>\n                            <\/div>\n        <\/div>\n                                    <div class=\"column\">\n            <div class=\"content\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                <p>The logo of Binnen en Buiten is a house with a window. We have carried this idea through in the design. At the top of the homepage there is a facade with a roofline. The four services are combined in one frame, like four panes of glass, and on the phone you can see those panes again in the menu.<\/p>\n<p>Each service has its own page. There you can read, for example, what the difference is between plastic and aluminum and how subsidies work. The frequently asked questions from customers are listed right there.<\/p>\n<p>Requesting a quote is done through a short form. Those who prefer to call have the number at the top always in view.<\/p>\n<p>We didn\u2019t build this site in WordPress, but in Statamic. For a business site with fixed pages and lots of photos, that\u2019s a good starting point. Binnen en Buiten easily handles texts and photos on its own. We choose what works best for each project.<\/p>\n            <\/div>\n        <\/div>\n                        <\/div>\n                    <\/div>\n        <\/div>\n\n<div class=\"section section-content two-columns has-pink-element\">        <div class=\"container\">\n                            <div class=\"content-holder\" data-reveal-group>\n                            <div class=\"column\">\n            <div class=\"content\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                                    <h4>My own work<\/h4>\n                                                    <h2><h2>238 photos of <strong>own work<\/strong><\/h2>\n<\/h2>\n                            <\/div>\n        <\/div>\n                                    <div class=\"column\">\n            <div class=\"content\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                <p>If you want a skylight or new windows, you want to see what a company has previously done. The projects page contains 238 photos of work by Binnen en Buiten, divided into six categories. For example, you can filter by skylights with just one click, and you can view each photo in greater detail.<\/p>\n<p>Despite all those photos, the project page responds in about 0.2 seconds (measured on November 6, 2026).<\/p>\n            <\/div>\n        <\/div>\n                        <\/div>\n                    <\/div>\n        <\/div>\n\n<div class=\"section section-images-grid\">        <div class=\"container\">\n                            <div class=\"grid-holder\" data-reveal-group>\n                    <div class=\"two-images\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">            <div class=\"grid-item\">\n                <div data-parallax-scrub=\"2\" data-parallax=\"trigger\" data-parallax-start=\"-30\" data-parallax-end=\"0\" class=\"parallax-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/11\/binnen-en-buiten-visual-lang.png\" alt=\"Pages from the website of Construction Company Binnen en Buiten\">\n                <\/div>\n            <\/div>\n                        <div class=\"grid-item\">\n                <div data-parallax-scrub=\"2\" data-parallax=\"trigger\" data-parallax-start=\"-30\" data-parallax-end=\"0\" class=\"parallax-wrapper\">\n                    <img decoding=\"async\" src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/11\/binnen-en-buiten-visual-mobiel.png\" alt=\"Mobile menu from the website of Construction Company Binnen en Buiten\">\n                <\/div>\n            <\/div>\n            <\/div>                <\/div>\n                    <\/div>\n        <\/div>\n\n<div class=\"section section-content two-columns has-blue-element\">        <div class=\"container\">\n                            <div class=\"content-holder\" data-reveal-group>\n                            <div class=\"column\">\n            <div class=\"content\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                                    <h4>The result<\/h4>\n                                                    <h2><h2>From photo to <strong>Request for quote<\/strong><\/h2>\n<\/h2>\n                            <\/div>\n        <\/div>\n                                    <div class=\"column\">\n            <div class=\"content\" data-reveal-group-nested data-ignore=\"false\" data-distance=\"1\">\n                <p>Binnen en Buiten now has a website where visitors can see real projects and read about the services they can choose from. After that, they request a quote or call directly.<\/p>\n<p>The site measures which pages lead to a request for a quote or a phone call. This way, Binnen en Buiten can see where the requests come from.<\/p>\n            <\/div>\n        <\/div>\n                        <\/div>\n                    <\/div>\n        <\/div>\n\n<div class=\"section section-featured-cases\">                    <div class=\"container\">\n                        <div class=\"text-holder\" data-reveal-group>\n            <h2>Also view our other work<\/h2>\n        <\/div>\n                    <\/div>\n                    <div class=\"card-holder\">\n            <div class=\"swiper-holder-cases swiper\" data-reveal-group>\n                <div class=\"swiper-wrapper\">\n                                            <div class=\"swiper-slide\">\n                                    <article class=\"case-card\">\n            <a class=\"case-card__link\" href=\"https:\/\/fresh-dev.nl\/en\/werk\/osteopathie-vinkeveen-website\/\">\n                <div class=\"case-card__media\">\n                                            <img decoding=\"async\"\n                            class=\"case-card__image\"\n                            src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/11\/osteopathie-vinkeveen-website-home-1024x683.jpg\"\n                            alt=\"Wes Coesel from Osteopathie Vinkeveen, image from the homepage\"\n                            loading=\"lazy\"\n                        >\n                                    <\/div>\n\n                <div class=\"case-card__body\">\n                    \n                    <h3 class=\"case-card__title\">Website Osteopathie Vinkeveen<\/h3>\n\n                                            <p class=\"case-card__description\">New website for Osteopathie Vinkeveen, initially designed per page in Figma for desktop, tablet and phone, then built. With a dedicated page for each complaint and the intro video at the top.<\/p>\n                    \n                    <span class=\"case-card__cta\">\n                        Review case\n                        <i class=\"fa-regular fa-arrow-right-long\" aria-hidden=\"true\"><\/i>\n                    <\/span>\n                <\/div>\n            <\/a>\n        <\/article>\n                                <\/div>\n                                            <div class=\"swiper-slide\">\n                                    <article class=\"case-card\">\n            <a class=\"case-card__link\" href=\"https:\/\/fresh-dev.nl\/en\/werk\/dd-customs\/\">\n                <div class=\"case-card__media\">\n                                            <img decoding=\"async\"\n                            class=\"case-card__image\"\n                            src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/05\/DDCUSTOMS-02253-1024x683.jpg\"\n                            alt=\"Fresh-Dev case DD Customs\"\n                            loading=\"lazy\"\n                        >\n                                    <\/div>\n\n                <div class=\"case-card__body\">\n                    \n                    <h3 class=\"case-card__title\">DD Customs<\/h3>\n\n                                            <p class=\"case-card__description\">New website for DD Customs focusing on custom sneakers, creative cases, and collaborations. A striking design with animations that matches the growth and energy of Dani's brand.<\/p>\n                    \n                    <span class=\"case-card__cta\">\n                        Review case\n                        <i class=\"fa-regular fa-arrow-right-long\" aria-hidden=\"true\"><\/i>\n                    <\/span>\n                <\/div>\n            <\/a>\n        <\/article>\n                                <\/div>\n                                            <div class=\"swiper-slide\">\n                                    <article class=\"case-card\">\n            <a class=\"case-card__link\" href=\"https:\/\/fresh-dev.nl\/en\/werk\/aelsmeer-catering-events\/\">\n                <div class=\"case-card__media\">\n                                            <img decoding=\"async\"\n                            class=\"case-card__image\"\n                            src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/03\/bedrijfsfeest-catering-cateringaelsmeer-1024x768.png\"\n                            alt=\"Aelsmeer Catering &amp; Events\"\n                            loading=\"lazy\"\n                        >\n                                    <\/div>\n\n                <div class=\"case-card__body\">\n                    \n                    <h3 class=\"case-card__title\">Aelsmeer Catering &amp; Events<\/h3>\n\n                                            <p class=\"case-card__description\">New bespoke website for Aelsmeer Catering &amp; Events with clear target audience segmentation, smart ordering options and strong video content. A platform that inspires and is focused on conversion.<\/p>\n                    \n                    <span class=\"case-card__cta\">\n                        Review case\n                        <i class=\"fa-regular fa-arrow-right-long\" aria-hidden=\"true\"><\/i>\n                    <\/span>\n                <\/div>\n            <\/a>\n        <\/article>\n                                <\/div>\n                                            <div class=\"swiper-slide\">\n                                    <article class=\"case-card\">\n            <a class=\"case-card__link\" href=\"https:\/\/fresh-dev.nl\/en\/werk\/meet-at-cliq\/\">\n                <div class=\"case-card__media\">\n                                            <img decoding=\"async\"\n                            class=\"case-card__image\"\n                            src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/03\/standaard-vergaderruimte-Den-Haag-4-1024x737.png\"\n                            alt=\"Meet at Cliq\"\n                            loading=\"lazy\"\n                        >\n                                    <\/div>\n\n                <div class=\"case-card__body\">\n                    \n                    <h3 class=\"case-card__title\">Meet at Cliq<\/h3>\n\n                                            <p class=\"case-card__description\">New tailored website for Meet at Cliq with a modern look, clear room overviews, and strong visual content. Focused on conversion with clear CTAs.<\/p>\n                    \n                    <span class=\"case-card__cta\">\n                        Review case\n                        <i class=\"fa-regular fa-arrow-right-long\" aria-hidden=\"true\"><\/i>\n                    <\/span>\n                <\/div>\n            <\/a>\n        <\/article>\n                                <\/div>\n                                            <div class=\"swiper-slide\">\n                                    <article class=\"case-card\">\n            <a class=\"case-card__link\" href=\"https:\/\/fresh-dev.nl\/en\/werk\/hermans-groep\/\">\n                <div class=\"case-card__media\">\n                                            <img decoding=\"async\"\n                            class=\"case-card__image\"\n                            src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/03\/Hermans-1024x683.jpg\"\n                            alt=\"Hermans Groep\"\n                            loading=\"lazy\"\n                        >\n                                    <\/div>\n\n                <div class=\"case-card__body\">\n                    \n                    <h3 class=\"case-card__title\">Hermans Groep<\/h3>\n\n                                            <p class=\"case-card__description\">The new website for Hermans Groep: a modern digital business card. Featuring their corporate identity, projects, and strong videos. <\/p>\n                    \n                    <span class=\"case-card__cta\">\n                        Review case\n                        <i class=\"fa-regular fa-arrow-right-long\" aria-hidden=\"true\"><\/i>\n                    <\/span>\n                <\/div>\n            <\/a>\n        <\/article>\n                                <\/div>\n                                            <div class=\"swiper-slide\">\n                                    <article class=\"case-card\">\n            <a class=\"case-card__link\" href=\"https:\/\/fresh-dev.nl\/en\/werk\/ciabatta\/\">\n                <div class=\"case-card__media\">\n                                            <img decoding=\"async\"\n                            class=\"case-card__image\"\n                            src=\"https:\/\/fresh-dev.nl\/app\/uploads\/2026\/02\/A7408594-scaled-1-683x1024.jpg\"\n                            alt=\"Ciabatta\"\n                            loading=\"lazy\"\n                        >\n                                    <\/div>\n\n                <div class=\"case-card__body\">\n                    \n                    <h3 class=\"case-card__title\">Ciabatta<\/h3>\n\n                                            <p class=\"case-card__description\">The new website for Ciabatta with a bold, fresh look. Bold design and strong photography are central, linked to an ordering module.<\/p>\n                    \n                    <span class=\"case-card__cta\">\n                        Review case\n                        <i class=\"fa-regular fa-arrow-right-long\" aria-hidden=\"true\"><\/i>\n                    <\/span>\n                <\/div>\n            <\/a>\n        <\/article>\n                                <\/div>\n                                    <\/div>\n                <div class=\"swiper-arrows\">\n                    <div class=\"swiper-arrow prev\"><\/div>\n                    <div class=\"swiper-arrow next\"><\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n                <\/div>","protected":false},"featured_media":1583,"template":"","meta":{"_acf_changed":false},"case_category":[],"class_list":["post-1575","case","type-case","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/fresh-dev.nl\/en\/wp-json\/wp\/v2\/case\/1575","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fresh-dev.nl\/en\/wp-json\/wp\/v2\/case"}],"about":[{"href":"https:\/\/fresh-dev.nl\/en\/wp-json\/wp\/v2\/types\/case"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fresh-dev.nl\/en\/wp-json\/wp\/v2\/media\/1583"}],"wp:attachment":[{"href":"https:\/\/fresh-dev.nl\/en\/wp-json\/wp\/v2\/media?parent=1575"}],"wp:term":[{"taxonomy":"case_category","embeddable":true,"href":"https:\/\/fresh-dev.nl\/en\/wp-json\/wp\/v2\/case_category?post=1575"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}