This post is Part II at our look at converting your website to use Responsive Design. In the previous post on Converting your Website to Responsive Design Part 1, we examined how modifying your existing site to use a Responsive Design can be a more suitable way to “go mobile” rather than create a separate mobile-only version. We also investigated how to choose a front-end web framework for your Responsive Design, and we looked at the pros and cons of updating existing code versus starting from scratch.
Today we’ll look at the process of how to convert your existing website to use ZURB’s responsive front-end framework Foundation.
Previously
Part 1: choosing a Framework and deciding on an implementation path.
Next
Part 3: becoming responsive.
Part 4: development tips and tools.
Step 3: Converting code to use foundation
To convert your existing website to use Foundation, you need to first determine the UI components that are candidates to be replaced with components by Foundation. We want to remove our custom components (and its associated CSS and JavaScript) and take advantage of the ones created for us by Foundation.
For example, if we had a navigation bar in our existing design, we don’t need to copy the code for the navigation bar to our new site since we will use the Foundation-provided navigation component instead. The goal is to avoid any duplication of code. The benefit of using Foundation’s code for elements like navigation bars or buttons is that Foundation’s code has been tested and QA’d on multiple browsers and devices. This isn’t a recommendation to be a lazy developer, mind you. We believe you should always do your own testing to ensure your design works. We want to take advantage of all the advanced features that Foundation provides.
Get familiar with the docs
In order to convert your existing website to Foundation, you will need to get familiar with the Foundation documentation. This unfortunately means having to read documentation. Fortunately, Foundation’s documentation is easy to read and provides many examples.
Identify components suitable for replacement
Once you have an understanding of the many features Foundation provides, you can then go through your existing website, page by page, and identify the components on your site that are suitable to use in your new Foundation-powered website.
The first, and most important, feature to identify and replace in your existing website is Foundation’s Grid system. This is an important step because Foundation’s flexible grid is the key component for making the new site responsive and scale to multiple screen widths, which we’ll need when viewing the new site on mobile or tablet devices. It’s also important to note that the Foundation grid can be used not only for the general layout, but can be nested within the grid for other layouts like image galleries or sidebars.
For example, on our website’s homepage, we identified the grid system as shown in this animated GIF:
The outside vertical lines correspond to the container for the grid. Each horizontal line corresponds to a row in the grid. The inside vertical lines correspond to the two columns inside the row containing the “We build websites” block and the "News" block.
We also identified the existing components of our site’s homepage that can be replaced with Foundation’s components:
As highlighted above, the corresponding Foundation features are:
- Navigation
- Buttons
- Orbit Carousel
- Block Grids
These steps need to be done for each page or template on your existing website to identify the full list of Foundation features to implement.
However, if the Foundation-provided navigation bar or carousel component isn’t a good fit for your existing style, you will want to keep your existing components and import them to the new responsive site. We’ll look at this in the next section, but an important note is that the components you keep might not be responsive by default as the Foundation components are. So you may have to manually convert these to become responsive. We’ll cover this in Part III of this series.
Once we have an understanding of what to replace, we’ll take a look at how to do the replacement.
Let’s start coding
As noted in Part I, when converting this website to responsive design, we opted to start from scratch rather than upgrading the existing code base. However, we’re not throwing away our old code completely. We’ll need all the content and almost everything else that isn’t covered by a Foundation component will need to be imported to our new site.
Once we have a new WordPress theme with an empty application CSS and Javascript file, we can then add the base Foundation CSS and Javascript files to the theme. We can then copy over any existing images and global styles from your previous site’s CSS file to the new responsive theme’s application CSS file. These can include site-wide styles such as colours, link styles, or typography. Similarly for JavaScript, we want to copy over the existing JavaScript files our previous site uses, including libraries like jQuery and any custom JavaScript files.
As we noted before, since we will be using Foundation, it’s important to keep in mind for both CSS and JavaScript, we do not need to copy over code from our old site that replicates functionality provided by Foundation.
One page at a time
Our approach to tackling the conversion was to work on transitioning each page or template at a time. Our website consists of at least 10 different types of page styles, with each page being an instance of that style. Your site may vary in its page styles or number of templates.
We recommend going through a methodical process for each page / template style as small items can be overlooked or have significant impact in the final design. Also, some of these components affect all pages and templates, such as headers, footers, or sidebars. The same approach applies when converting these global components.
Using the Foundation Documentation, and your identified list of suitable Foundation components, for each page/template:
- Replace your existing layout markup or grid system (i.e. containers and columns) with the responsive grid layout provided by Foundation.
- Make any adjustments to column or row widths and heights you may need in your CSS file to match the design of your existing site.
- Replace your existing components with ones provided by Foundation, such as buttons, forms, tabs, carousels, and modals.
- You will need to override or create new styles for your site’s design, using the Foundation elements as a base. For example, you may need a larger, rounded-corner version of the button component instead of the base button provided by Foundation.
- Some Foundation components such as navigation or carousels also have a JavaScript dependency to be activated. Those should be added to your new application JavaScript file.
- Copy over all other content, images, and markup and its associated CSS or JavaScript to our new responsive website.
Once you have finished converting the page to use Foundation, it should look virtually identical to your previous website on the desktop. So now that it’s looking good on the desktop, we can now focus on making it responsive.
Coming up in Part III: Making it responsive
So far we’ve converted our site to use a responsive front-end framework, and it’s looking good on our desktop browsers. In Converting Your Website to Use Responsive Design Part 3, we’ll look at how to make your website responsive for tablet and mobile devices.
Need help with your next responsive design project? We make new digital experiences possible with end-to-end capabilities that include strategy, usability, design, development, and analytics. Get in touch to learn more.