Greg Gibson

What I Do

When it comes to web design and development, I do a little of everything. Or, I guess more accurately, I do one or two things intensely for a while, and then I switch to doing something else, and then to something else, and so on until a project is finished. I can get the job done with tools like SQL, JavaScript, ASP.NET, Cordova, etc.

But I'm happiest when I get to focus on HTML and CSS.

Much of front-end development has gravitated toward JavaScript and framework expertise. But these days, I'm more and more interested in—and love chatting about—modern web typography (e.g., variable fonts and OpenType features), CSS custom properties, CSS grid, responsive tables, HTML sectioning, and accessibility.

What I've Done

www.ipsd.org

I run the web department for the fourth-largest school district in Illinois, with 29,000 students and 3,000 employees. I designed, developed, maintain, and support the district's main site (ipsd.org) and over 40 subsites. This year, I've given our sites a UI refresh, with a major focus on responsiveness and accessibility.

  • Notable tech: I created the site with HTML5, CSS (via Sass), JavaScript, ASP.NET, SQL Server, and a few jQuery functions (for skip links and accessible menus).

Web Accessibility Checklist

The Indian Prairie WCAG 2.0 Web Accessibility Checklist (PDF) simplifies comprehensive accessibility auditing for federal government entities (like my district), their vendors, and any other organizations that want or need to ensure that their sites are usable by all visitors.

Data Lab

The IPSD 204 Data Lab is the first in a collection of dashboards we're designing to give our community ways to visually correlate demographic, financial, and academic info.

  • Notable tech: I use D3.js to generate the SVG data visualizations. I'd love to say that I also created a clever python script or something to scrape the data from the State of Illinois website, but the truth is, I combed through PDFs and then hand-entered into a CSV file.

CSS Font Scaling (2017)

Scaling Relative Font Sizes with CSS Locks and Vars demonstrates how font-size can be scaled smoothly between minimum and maximum values as the browser viewport resizes. (A refinement of this technique is also used on this very page. Resize your browser or rotate your phone to see!)

  • Notable tech: It's all done with vanilla CSS: custom properties, media queries, and calc().

Responsive Web Widgets (2014-15)

I use updated variations on these widgets for all my work sites. As with most of my front-end development, I tried to see what I could do with CSS, first. And then I added only as much JavaScript as was necessary to make them work.

  • Navlight is a minimal, responsive main nav menu widget.
  • Tablight adds top-tabs to display multiple content panels on a page.
  • Mesita makes mobile tables horizontally scrollable.

IPSD204 Mobile App (2013)

IPSD204 is the mobile app I developed for the school district where I work.

  • Notable tech: Cordova, Xcode, Knockout.js, Google Maps API, and a homebrewed JSON API.

Majestic (2000-02)

Majestic was an online Alternate Reality Game—incorporating web, email, fax, phone, and messaging —by Electronic Arts. As the primary web designer/developer, I produced its homepage UI (converted here from Flash to HTML5) and much of the other in-game web content.

  • Notable tech: HTML, Javascript, CSS, JavaServer Pages, Flash, and Oracle RDBMS.

Contact