← Return to Portfolio

dencity.us

The Dencity site was designed by Chet Loesing. He hired me to bring his creation to life. I built the site on a WordPress platform, customizing for Dencity’s unique website needs.

Animation

iPhone screenshot of dencity.us.
The site design adapts for both large and small screens.
Businesses like architecture firms need to convey a sense of cutting-edge. Traditionally, Flash websites were employed to achieve this, but because of the accessibility issues with Flash, it’s a less viable option. I used a combination of JavaScript and CSS3 animations to give the site a smooth, reactive feel. The result is not only an enticing aesthetic, but an enticing interaction that works across devices and is built on top of an accessible foundation.

Screen Adaptation

The design started as a traditional, fixed-width site. As the project continued though, it became clear that we needed to accommodate both small and large screens. The site design adjusts as screen sizes increase or decrease to continue to highlight the gorgeous photography of Dencity’s work.

Dencity Projects

A lot of my customizations revolved around the management and display of the “Work” section of Dencity’s site. Their projects are managed by a custom post type in WordPress, allowing customized control of both the input of projects and the display of each project. When adding or editing projects, they can manage the photography, details, summary, and “featured” status.

Featured Projects

Projects set as “featured” show on the home page and a custom “Featured Project” widget that can be added to any sidebar. If more than one project is set as “featured,” the home page and widget choose one at random.

Screenshot of Dencity Project edit screen.
The Dencity Project edit screen provides management of photography, related blog posts, and featured projects.

Project Navigation

Each project consists of its imagery and project details. The photographs are displayed and navigated in an image slider, navigating to the details involves the image slider sliding up and off the screen while the details slide up from the bottom onto the screen. Keyboard navigation was added to aid the ease of navigating a project.

Blog / Project Navigation

To connect related blog posts and projects, I created a custom taxonomy: “Related.” It’s managed just like post tags are managed, and new “Related” tags can be created as needed. The benefit to this approach, as opposed to using a naming convention with the standard tags or categories structure is that the “Related” tags don’t show on the site, keeping the linking infrastructure behind the scenes, and project posts and blog posts can share the Related taxonomy in the admin. The user can see all the Related tags already in use and choose the appropriate ones or create new ones as needed. The connecting goes both ways; a project and post can be connected from either the project edit screen or the post edit screen.

Popular Posts Widget

The final major customization is the “Popular Posts” widget. As with other widgets, it can be used on any sidebar. The default algorithm is to show the most commented blog posts in descending order. From the widget panel, Dencity can decide how many posts they want to show in the widget. They can also choose to promote specific posts if they want to. If they indicate less posts than are shown, than the chosen posts are listed first, followed by the most commented posts to fill the post list. If the number of specific posts are more than the posts to show number, than the posts to show number is overridden, and all of the indicated posts are shown. This gives Dencity ultimate control to promote their content as the need to while providing good, appropriate default behavior.


The Dencity site development works with the clean aesthetic to provide a reactive, user friendly, and easy to manage website for Dencity and its clients.