Dev Diary: ITP Day 5

Six months later and I’ve finally cleared the decks enough to get back into the ITP redesign. Now, where to begin? Where I left off, I guess. Back to the event calendar! It took a while to get back up to speed. Thankfully, I decided to keep this diary. It was actually helpful to look back at the first four days to find where I left off.

I have run into a bit of an issue with the Solspace Calendar module, which made me start researching the update process for EE2. I found this entry on Upgrading the Calendar on the Solspace forum, which hopefully will be helpful.

Calendar User Flow

Landing Page - Displays events for today in main content area. Events by month in the sidebar. List of all calendar types in the sidebar.

Event Detail Page - Lists details for the event and upcoming occurrences and past occurrences.

Calendar Type (Category) page  - A description of the calendar type or category (business networking, concerts, etc). View by Month, Week or Day. Download to iCal. Links to other calendars.

After working on the calendar for a bit, I decided to start working on the layout of the site. Trying to flesh out the header, navigation and search boxes. I started work on the desktop version and have really streamlined the header which I’m hoping will make navigating the site easier. There’s always the risk of “feature creep” which I’m hoping to avoid.

Forget the calendar, let’s make something pretty

I have decided on a horizontal bar for logo, navigation and search which will then shift to two bars - top bar for branding / navigation and a second bar for search.

I’m using a background gradient for the header which I created in CSS at the Colorzilla site. The code below is the CSS for creating the gradient that will make up the header of the site. Using CSS for the background, TypeKit text for the logo and Fontello for the icons (more on that below) means that there are currently no images used for the header of the site. That feels like a win to me.

background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */

I’m a big fan of Fontello. Fontello allows you to create sets of icon fonts. The advantage of icon fonts is that they look great on high pixel per inch (Retina) displays as opposed to using graphics (PNG or GIF) which require @2x versions to look good on high PPI devices. I’m using Fontello throughout the site for things like social icons (Twitter, Facebook, etc) and also for the navigation menu on mobile. The icon with the 3 horizontal bars has become an almost universal indicator of a menu. I’m using that icon to create the drop down menu that will be displayed in the mobile interface.

In addition to the Fontello menu icon, I’m also using FlexNav to create the drop down menu on display in the demo GIF.

For some reason, I had a heck of a time getting FlexNav to work with the code that I had written for the navigation. I bet I spent two hours debugging the issues when I finally just reworked the code. Definitely not my finest moment.

Mobile Navigation Preview

After too many hours in the Safari mobile web inspector, I finally had a nice responsive header as you can see in the demo GIF above or by viewing the site directly. There are a few minor bugs. When I type a search term in the box the layout shifts left, showing empty padding on the right. That’s next on my target list.

⇠ Next Article Previous Article ⇢

About The Author

G. Brad Hopkins's avatar
  • G. Brad Hopkins
  • About Me: I bought my first computer - an Apple Performa 6320 - when I was in college and have been building websites ever since. These days I spend most of my time writing code and helping to bring interesting projects to life.
  • @gbradhopkins