The Project

Jamf is an international software company that sells device management software exclusive to Apple platforms. The primary purpose of jamf.com is lead generation, but it also houses an extensive library of product resources and serves as a registration platform for online webinars. We also translate parts of the site into 5 languages.

The team that maintains it consists of 2 ‘Full Stack’ developers (one focusing on EE/PHP and MySQL and the other focusing on DevOps, Javascript, and external services) and myself. Though we all have our areas of expertise and focus, we function well as a team and work across disciplines when necessary.

In the past 3 years I have been the principle Front End Developer on the 2 latest iterations of jamf.com. The scope of the rebuild to the current iteration was massive, and the requirements were somewhat nebulous (flexibility was the buzz-word used by stakeholders to describe their vision.) The ask was more of a design tool than content management system. As we began to build components and layouts from the pixel-perfect comps the digital designers provided us, we had to take care to ensure all components could:

  • live next to each other in any combination
  • live in a 1, 2, 3, or 4 column layout
  • be contained in a max-width layout or bleed to the edge of the viewport.

At its core, jamf.com is built with the ExpressionEngine CMS. In the current iteration we chose an ExpressionEngine plugin called Bloqs to meet the flexibility requirements of the project. We continued to use Bootstrap (from the previous site’s templates) for the contained layouts and wrote our own grid for the full-bleed layouts using Flexbox.

From a markup perspective, it is valid, responsive, accessible and semantic. It also passes Google’s performance benchmarks for Desktop and Mobile. Some highlights of the site that I am extremely proud of and provide a good example of my abilities include:


Semantic Markup

In some ways the current version of jamf.com is still a prototype. Pages are overbuilt because we just didn’t know what the the end results were going to be at the time of development.

Since launch I have identified and documented numerous layout patterns and formulas the content creators use repeatedly. When time allows to address technical debt, I take these patterns and build more lean and purposeful templates that turn our system back in to a more traditional CMS. An example:

Initial:Final:This gist can be seen ‘in the wild’ at: https://www.jamf.com/solutions/industries/k12-education/ (bottom of the page)
- Responsive Images: As a progressive enhancement, the PHP Developer and I wrote an ExpressionEngine plug-in to resize source images and generate files to be used by the srcset image attribute. This allows the browser to select the image that best fits its current environment (viewport, bandwidth, etc) https://gist.github.com/cwgieselman/0675a763aef90e49cdf4a0fc3f302ce3#file-person-component-html-L3-L14 - Accessibility: My time at CaringBridge, life experiences, and general disposition make accessibility extremely important. And its proven that taking it into account during design and development instead of ‘going back to do Accessibility’ is the way it should be done. I consider Accessibility in everything that I design and/or build from the beginning. A few highlights from the previous component: Proper roles and ARIA Attributes for presentational images: https://gist.github.com/cwgieselman/0675a763aef90e49cdf4a0fc3f302ce3#file-person-component-html-L6-L7 Screen-Reader text for visual links: https://gist.github.com/cwgieselman/0675a763aef90e49cdf4a0fc3f302ce3#file-person-component-html-L23 - SEO with Microdata: We sprinkle schema.org attributes throughout the site to provide structured data to Search Engines and increase organic SEO: https://gist.github.com/cwgieselman/0675a763aef90e49cdf4a0fc3f302ce3#file-person-component-html From a CSS perspective, we write Source Code in SASS and compile with a variety of Node Modules for linting, error-checking, post-process, and concatenation using Grunt.js In places where ExpressionEngine acts as a true-CMS and we control all layout via templates, we have begun leveraging the CSSGrid Spec. An example can be seen here: https://www.jamf.com/contact/ The last few things to point out are design-related. As the ‘presentation’ guy I have assumed the role of UX/UI Designer for the site. Some interface elements that I designed, prototyped, tested (with the help of a UX Researcher) and built include: The Global Navigation bar and ‘Junk Drawer’ sub navigation pattern: https://www.jamf.com/ The Resource Search and Filtering pattern: https://www.jamf.com/resources/search/?resources=true&keywords=apple%20device&filters=E-books%2CEducation (They are not conducive to this media, but in person I can show Wireframes and Prototypes of this example!)