Company Website: Martin Prenn Architekten

Video Walkthrough of "Martin Prenn Architekten" Website.


The client was seeking out a web developer to build their company website. They had a couple of requirements for their website such as:

  • i. Follow the UI/UX specification as designed by the client.
  • ii. Enable a way to sort archive by building type, date and status.
  • iii. When an archive or news link is clicked, it should overlay the home page in such a way that when the overlay is closed, the page returns to the scroll location as set previously.
  • iv. Provide an easy way for the client to update content on the website as archive and news pieces develop.
  • v. Provide a way for the client to be in control of the composition/layout of the home-page by providing a setting for the location and size of the archive/news images.
  • vi. Create a carousel for the archive page so that clients of the firm may peruse the featured images of the project.
  • vii. When the site is shown on a mobile, create a different layout so that the screen area may be used to the fullest for the viewing of images.
  • viii. Needs to be multi-lingual as the business expands to international clients


These are the solutions that were provided to the client in order to fulfil their needs:

  • i. Used Bootstrap 4 UI framework to aid in developing a responsive website that adhered to the UI requirements of the client.
  • ii. Used the javascript plugin called shuffle.js in order to do client side sorting of archive items.
  • iii. Wrote an AJAX script in order to request archive/news posts from the server that could then be overlayed onto the home-page of the site so that the scroll location is kept in place.
  • iv. Wordpress was chosen as the CMS for this client since it has a well-documented user-interface that would be easy for the client to learn. The data logic was handled with PHP.
  • v. By using Advanced Custom Fields, a field was created on the CMS where the client could control CSS transform and size properties for each archive/news item that is displayed on the home page.
  • vi. By implementing the Bootstrap 4 carousel and linking it to glide.js with javascript, a easy to use carousel was created that could be controlled with the keyboard.
  • vii. Using conditional statements with jQuery, the layout of the site in mobile is changed to enable the best usage of the mobile screen.
  • viii. Using the polylang plugin, a multi-lingual website was created, enabling the client to enter data in native German and English.


This client required a multi-lingual and responsive website that could periodically be updated with archive and news content as the company completed new projects.


I had the pleasure to work with Waseem on the development of our company website. He was in charge of constructing the website and establishing a backend interface that made it easy for us to update web-content. We provided him first with web design layout.
Waseem is easy to communicate, responsive and most importantly, he caters to our individual needs and wishes. As an architectural office, aesthetic aspects, such as proportion between each elements, is especially important to us. Waseem has helped us to realize our vision down to the pixel. He also worked to optimize the web-content loading time and responsive web-design. These are scopes of work that we did not foresee, but Waseem has worked with us until all aspects of the website were seamless.
We are very happy with Waseem´s work, and I would recommend working with him to develop your website.


Hui Rong Liu


Martin Prenn Architekten