Responsive Design and Development: Learn with Homer Website
'Project' => 'Based on 1100 pixel-wide designs by Learn with Homer’s creative director, Bee Johnson, design and program fully responsive styles for learnwithhomer.com. 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 learnwithhomer.com, 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).',