Company Website: Martin Prenn Architekten

Problem

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

Solution

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.