code 3:20, LLC has been contracted to take an existing website and transform it from a non-responsive into a responsive website so that our friends at Google are very happy! This very beautiful website was developed by a very talented designer a couple of years ago. Almost every element on every page of the site has it’s very own CSS which was implemented via SASS. This makes the job extremely challenging and has caused us to essentially start from scratch. We can reuse the content and images, etc, but everything else is from scratch.
The site owner loves the current site (and so do we) and wants it reproduced exactly across all devices. The site is static and built upon the LAMP stack and can be seen here -> Village Green Hills Apartments. We are using MAMP as our dev environment and Atom as the code editor on a Macbook Pro. One of the major issues with which we are dealing is addressing the overlaid images, videos, and content within the current design. Bootstrap doesn’t handle that for us gracefully so the approach is to use Bootstrap in conjunction with media queries and CSS. Deeper into the site there are scrolling images and content delivery via jQuery, integration with Google calendars and form submission via PHP for residents and potential residents. Some of these elements were implemented by code 3:20 way back when and will be updated. This is creating a fantastic learning experience while doing deep dives into Bootstrap, CSS, jQuery and media queries!
The picture above is a before and after shot of the site’s homepage with the viewport set at the minimum as viewed on a desktop browser. To view the work in progress today (November 6, 2015 – 13:21 CST), you can see it here -> Responsive Homepage. This page was put up to show the owner the approach which was approved. Right now, the menu is not functional and still needs to be tweaked for mobile devices. In order to reproduce the site exactly, we used Bootstrap’s menu with custom CSS on the navbar-default class. This menu contains dropdowns so the default functionality of Bootstrap didn’t match the current implementation. We changed the default values in order to reveal the dropdowns via hover, rather than clicking. Currently, this behavior is not functioning correctly on mobile devices. Part of this development will be a rollout of each page, since they are all so complicated in the conversion. The test page will not be updated and eventually will be removed. The next step is to take the responsive homepage and new menu and integrate it within the existing site. Then, each page will be replaced one-by-one.