David Berman Communications has been on the Web since at least the early 2000s, and has been managing its website through static HTML and a smattering of PHP files across its Web server. For this project, we were asked to help move the old site into WordPress to make content management simpler.
As part of that request, we were asked to keep the old design in place as much as possible, with minor changes and updates along the way. Therefore, we developed a new custom WordPress theme based on the Ten-321 Framework, and made it match the old design of the site as closely as possible. However, in doing so, we threw in a few new features, some of which are outlined below.
- The design is now “adaptive”. In modern browsers, the design will adapt itself according to the width of your browser.
In large-width scenarios, the design will include 4 separate columns (a left sidebar, the content area, and 2 right sidebars). In scenarios where the browser width is wide enough for 2 columns, the design will adapt to display the left sidebar and content area at the top of the page with the two right sidebars appearing below those. As the screen width gets even narrower, all four columns will stack on top of each other, with the content area appearing at the top.
In the old design, the pages were set to a fixed width, which created a horizontal scrollbar in situations where the browser was too narrow to fit all of the content across the screen.
- Many images were replaced with simple CSS declarations.
The shadow that appears at the bottom of the header and the top of the footer was implemented with a large image in the old design; whereas CSS box-shadow declarations are used to implement those shadows in the new design.
The left navigation menu on the old version of the site used images to represent the top-level navigation items. The new design uses CSS to replicate the general appearance of those images with plain text.
The home page of the website uses an animated version of the company logo, with the “db” icon moving slowly up from the bottom and into place. On the old site, this was implemented using an animated GIF image. Since the animation is only present on the home page, that meant that 2 different images were used for the logo icon, depending on which page you were viewing. On the new site, CSS animations are used to implement this same functionality, allowing the same image to be used no matter which page is being viewed.
- Minor color modifications were made to increase the color contrast in various areas.
- A completely new portfolio was added to the site using custom post types, allowing the client to easily update and add new information to the examples of projects they’ve done. The portfolio allows visitors to narrow the scope of listed projects according to the project type or keywords associated with projects. Each entry in the portfolio includes a nice image gallery, implemented using “FlexSlider“, a very cool, responsive jQuery slider.
Once the theme was developed, the content was imported and set up within WordPress. All of the sidebar items, which were implemented through various methods (hardcoded into pages, PHP includes, etc.) are all managed now through the native WordPress widget interface (with a little help from the Widget Logic plugin). The tabs on the home page are managed through native WordPress posts. The theme (especially the CSS) is now fully accessible to the client through the WordPress administrative interface, making it much easier for everyone involved to manage the content and the design.
The client also requested that some of the longer pages be split into multiple tabbed sections, so we implemented the native jQueryUI tabs API and tied it into some custom post meta information to allow the client to specify exactly what content appears in which tabs. A few of the “Courses” pages on the website, such as the “New Standard on Web Accessibility” page, already use this interface, and the client is working on adding it to many others.
This project uses quite a few different plugins, many of which had to be customized in order to work with the client’s Web server (which runs on Zeus rather than apache). Some of the more prominent plugins in use on the site include:
- Gravity Forms (a premium plugin)
- All in One SEO Pack
- Breadcrumb NavXT
- Page Links To
- WP-Table Reloaded