Responsive Design and Development: Learn with Homer Website

Learn with Homer Homepage
Learn with Homer’s homepage. The general premise of mobile behavior on this page, along with many others that utilize a two-column layout, is to shrink elements until the page width goes below 700 pixels, at which point the columns get stacked. I programmed this entire page, although our wonderful front-end developer, Jordan Haven, has made some additions and adjustments in the time since it launched.
Homer’s Success Stories
This is Homer’s “Success Stories” page. I designed mobile behavior and coded the entire page, including the python/Django model for ]the testimonials. Homer’s ‘Customer Happiness Team’ keeps the list of testimonials up to date through the website’s CMS.
The Homer Method Webpage
Our creative director, Bee Johnson, comes from an illustration background, and as a result we get incredibly rich visuals on our website. Those don't always translate to mobile layouts, however. As such, this page, about ‘The Homer Method,’ is an example of a page in which I created a completely different layout below 700 pixels (the ‘brotherBear’ and ‘sisterBear’ ranges). I programmed this entire page.
Learn with Homer Affiliates
I took a page out of what I did for The Homer Method when I styled Homer’s affiliates informational page: the graphics shrink to icon size and get floated left of the text when the page width goes below 700 pixels. I programmed this entire page.
Homer’s Pigeon Post Homepage
Pictured here is Homer’s Pigeon Post webpage. An image carousel that I built explains the steps of how the Pigeon Post works. It uses CSS transitions to slide the images left and right as the user clicks on the arrows on either side of the carousel, or when a user clicks on one of the 4 steps below the carousel.
More of the Learn with Homer Homepage
The original homepage copy ended sections with bullet points, but that was bad for wrapping text: the bullet points would shift far to the left, breaking up the list. As such, Homer’s creative director and I agreed to move bullet points up in order to wrap paragraph text around left-floated images. Meanwhile, I programmed headline above the left-aligned image in the HTML, so it pops above the image at widths below 700 pixels.
Learn with Homer Signup Form
I also programmed our signup forms on the front and back end. This one is an another example of where the 1100-pixel-wide design couldn't directly translate to narrower layouts, so we used an alternate background, and I moved the email and submit fields below the headline.
Learn with Homer 2nd signup form
Just in case people get to the bottom of the (very very long) page and haven't signed up, we have a third signup form that they can fill out. Below 1100 pixels, it loses the left image, and becomes text-based.
Learn with Homer Article Landing Page
I also created mobile styles for a set of article-style pages on the website. These have proportional sizing until the page hits 700 pixels in width, at which point the right banner is hidden, the signup form appears below the text, and the related articles stack
Learn with Homer Quotes and iPad Frames
I originally built the homepage and parent/teacher benefits pages with the app images in iPad frames, but when we launched the web product in November 2014 we removed the frames as a default, and I added a CSS class that adds iPad frames if the user loads the page with with a GET parameter or a cookie indicating the app product (product=APP_PRODUCT).
Learn with Homer Press Page
This is one of the pages that was built by Homer’s previous web developer. I simply adjusted it to make it work in mobile layouts.
Github Contributors Graph
As you can see from this graph, I've been a long-time (albeit occasional) contributor the the Learn with Homer website’s code, with the second-greatest number of commits. These designs date back to the April–June range that you see in the chart. Homer’s wonderful front-end developer, Jordan Haven, is #1.

'Project' => 'Based on 1100 pixel-wide designs by Learn with Homer’s creative director, Bee Johnson, design and program fully responsive styles for This was one of numerous points during my work with Homer when I was called upon to work not only on design, but also development for the website.',

'Challenges' => 'I needed to balance aesthetics and communication as pages on the website adapted to any given screen width.',

'Solutions' => 'To adjust the styling for, I used a lot of percentage sizing and in some cases, alternate layouts at breakpoints. We set 4 major screen sizes (which we dubbed, ‘papaBear,’ ‘mamaBear,’ ‘brotherBear’ and ‘sisterBear’) to define styles as the screen width changed. Meanwhile, percentage styles based on the layout at 1100 pixels wide allowed the default styles to extend below 1100 pixels. Where section titles and images were vertically aligned, I floated them in the CSS so that at widths below 700 pixels, I would be able to pop the title above the image, even where the image appears to the left of the title. For most pages, I simply rearranged images and text a bit for small screen sizes, but for pages like Homer’s page for affiliates and the ‘Homer Method’ page, I created a completely different layout for small screen widths. Although much of my focus was on mobile styling, I also built widgets such as the image carousel for Homer’s Pigeon Post homepage, the popup banners for a number of pages, and the signup forms on several pages of the site.'

'Web Overhaul (Nov 2014)' => ' Wireframes and User Flows: Homer launched an HTML 5 web app in November 2014, and in advance of the webapp launch, I created wireframes and user flows to plan for the changes that would be required of our payment system, parent dashboard, and account settings (which would all need to accommodate users from our two different products).',       );