About Kyle L. McGregor

Since 2006 I've been working with small businesses and individuals to help them with their web presence, both with web presence and social media interactions.

In 2011, while searching for potential solutions to the issue of developing websites in an ever increasing number of screens; I came across Ethan Marcotte's blog post on responsive web design. Reading that blog post ignited my passion for using the latest web development techniques and establishing best practices for overcoming the challenges to the multi-screen problem.

Implementing responsive design has defined my path in front-end web development, and continues to challenge me in new ways.

Starting in 2012, I began working with established web agencies to refine my skills in front-end web development and bring responsive web design solutions to more than a few projects. This also allowed me to teach others about responsive best practices, specifically with media queries and SCSS.

In May of 2014, I co-founded a web agency with 3 partners, head over there for more details: Oddbee

LinkedIn | GitHub | Twitter



Selected works in responsive web design and development, eCommerce, and social media projects.

New portfolio website coming soon!


Blog Posts & Presentations

Check out some of my blog posts. More blog posts [and some Github presentations] to come!

Making Magento Responsive Using Foundation: Part 2

DemacMedia.com on April 23, 2014

...By establishing our own internal framework / platform for responsive projects we can save time and effort, creating more time to focus on delivering excellent user experience to help increase our customers eCommerce sales. It also allows for a consistent reference point for our own projects, so that we can improve the platform and even more easily roll-out upgrades for it going forward.

From the ground-up, a responsive framework specifically for Magento

  • From the ground-up, a responsive framework specifically for Magento
  • Mobile-first
  • Modular re-usable components
  • End result in fully responsive Magento base theme

Read more

Making Magento Responsive Using Foundation: Part 1

DemacMedia.com on April 16, 2014

Responsive design and development is something that fires me up and I’ve been passionate about it since 2010/2011. If you haven’t read it yet, take a look at Ethan Marcotte’s original 2010 article on Responsive Web Design.

At Demac, I was first tasked with a few small updates for clients, getting a feel for Magento and figuring out how things work; where the PHTML view files are and where the CSS & JS of the theme live, as well as the hierarchical fallback, so that you only change what you need to, and how to extend what is already there.

Soon after that I was fortunate to get handed a project that was new, and responsive, which became an opportunity to build a responsive Magento theme “from scratch”. The project helped me get familiar with the nuances of Magento as well as allowed me to take the time to produce an internal framework for responsive best practices here at Demac Media. Read more

Reduce The Complexity Of Responsive Web Design Using SCSS

DemacMedia.com on November 28, 2013

...As I mentioned previously, it’s smart to keep your dependencies within the project you’re working on, so on the immediate left we have Foundation’s SCSS folders. _variables.scss is the main file that you would edit for using the framework, and the _foundation.scss file is where you can choose not to import certain features. That’s another huge benefit to using SCSS with a framework; you can easily switch off and on which parts to include without having to figure out where one section of code ends and another begins. Read more

Web 2.0 For The Food Movement

SustainOntario.com on May 21, 2010

Social media is fairly young, but has already proven to be a powerful tool for spreading news and events quickly, in an interactive, engaging way. Farm and food leaders across the province are using a number of social networks to spread the word about healthy, local, sustainable food. Here are five social media tips for those of you interested in using these tools.Read more


Get in touch

Head over to Oddbee to check out my new venture

Email me

Or connect with me on:

LinkedIn | Twitter


Working closely with team members for building out site content and features. Collaborating with Katerina on creating a fully responsive HTML5, CSS3, & JS agency website based on her PSD designs as well as our own rapid prototyping process to solidify features before building them out.

Website: Oddbee.com

Twitter: Oddbee Studio

Custom build includes retina support for images and sprites, many CSS3 animations, as well as interactive features such as the parallax Home & Mission sections on desktop. Built on top of Zurb Foundation 4 using SCSS, JS plugins, and many lines of custom jQuery.

Image switching based on screen size and pixel density using Foundation Interchange, so that image sizes are always optimized for the screen size.

Three different sprite sizes for: 1) mobile; 2) mobile retina & desktop; 3) desktop retina


A Demac Media project

Re-branding of the Demac Media brand, including a new fully responsive design for demacmedia.com to kick-off the start of 2014. Built on both Wordpress and Magento. Responsive front-end built with HTML5 and Zurb Foundation 4.

Responsive custom Wordpress theme for main site, with separate custom Magento theme for the product store.

Design by Emily Dixon. Wordpress and Magento development by Tony Lai. Responsive front-end development by Kyle L. McGregor.

Optimized for screens from 480px wide to 2560px wide

4 reflow points: mobile, tablet, small desktop, and large desktop

10 different custom pages (homepage, team page, porfolio, contact + more) plus 3 types of custom blog posts.

The custom Magento theme for this project was built upon an internal front-end responsive framework that I built on top of Foundation 4, in order to rapidly build the front-end of responsive eCommerce websites.


A Demac Media project

eCommerce site built on Magento - Responsive Retrofit

Snuggle Bugz was getting an influx of mobile traffic, so they needed a mobile optimized experience. Desktop design was kept very similar to previous site, and two new layouts were made for tablet and mobile.

Responsive retro-fit; in the last couple weeks of the project I was tasked with optimizing the page layouts, UI, and content reflows for tablet and mobile screens.

Homepage image slider has touch functionality and actually has 3 different functionality refresh points for each screen size. Product thumbnail images on mobile are optimized for touch devices. Many challenges with a retro-fit and using an old code-base, but changes were implemented in time for the 2013 winter holiday season (very busy time of year for eCommerce).

Site was featured at Dx3 Canada 2014

Starwood Hotels - Japan, Korea, Guam

A WebCanada project

Starwood Hotels Japan - Three different data sets: Japan, Korea, & Guam. One theme for all three sites. Built on WebCanada's LiveCMS platform.


GreenHeroes.tv is a transmedia project, airing as a TV series on TVO, and a rich media website with a strong social media outreach campaign, produced by CineFocus Canada.

Green Heroes features people from across many fields that are making a difference in their community by promoting sustainable practices. Featuring Vandana Shiva, David Suzuki, Sarah Harmer, Wangari Maathai, Jamie Kennedy, Jane Goodall, Leilani Munter, Rob Stewart (Sharkwater), William Lishman, and many more.

Executed a 10 month campaign involving content strategy, social media campaign strategy & management, contests, community outreach online & in-person. Social media campaigns revolved around bi-weekly themes revolving around launching new "webisodes" which were much shorter versions of the episodes that aired on TVO. Site content involved a lot of rich media management, with videos, images, and social media contests.

Sustain Ontario

Non-profit organization focusing on changing the food system in Ontario through a policy advocacy approach through community outreach and polarizing farmers, other food organizations and community members via their The Alliance for Healthy & Farming.

Website: sustainontario.com

Twitter: @sustainontario

Managing & creating new blog content, updating the events calendar, representing SO at events, office admin, social media engagement & management, newsletter creation, web design & development, Google Maps API integration with a large illustration of the Ontario Good Food Map.

Through my campaign outreach, and my involvement at several local food events, I helped add 50 new members to the Alliance for Healthy Food & Farming and developed a strong social media presence and long-term engagement strategy.